There is no simple way to do this. There are so many different phones and cross over devices that it would be an incredibly complex thing to do.
The idea of turning off animations for touch devices is really to cope with hover triggered animations which become less than obvious for touch devices.
Also, please don’t try using a php stack solution to remove animations. Things like Agent can only remove HTML and so all the JS will remain and can easily cause errors when its associated HTML has been removed without it knowing.
@tav Thanks Tav for your response - and there was me (silly boy) thinking that a snippet of CSS code would have done the trick. Given your advise I will either leave-on or turn off touch device animations after some further thought.
I think that, in general, an animation should work as well on a phone as it does on a tablet (assuming it is working in percentages etc etc). If there are difficulties between the two then perhaps it is either too complex or the wrong thing to do? Without seeing it I am only stabbing in the dark so feel free to dismiss this as inappropriate to your situation.
I’ve just looked on my phone and they work the same as on desktop for me - what is your issue with mobile?
The only other thing I would say is that the zoom effect can be nice if it is combined with opacity and the zoom scale is started at a larger value. Starting at 0.6 and zooming to 1 at the same time as fading in the opacity from 0 to 1 usually works quite well; may be worth a little experiment as a starting point.
Assuming you’re using Foundation you could use the Visibility stack to hide show content on various device types/breakpoints.
It would mean you duplicating content (with/without anim etc) but I’m sure you could achieve what your after.