Sections Pro & Animation Of Elements

Dear @tav

A query regarding Sections Pro & the animation child stack

I note that we are able to turn off animations for touch devices but is there a way to be more specific?

The animations that I am considering works well within the context of an ipad but less so for phones.

It is the phones specifically that I would want to turn off animations for.

I have the feeling that this could be achieved with some CSS but it’s here that I start to scratch my head.

Would appreciate any help / guidance.

Regards
Paul

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.

Thanks as always.

Paul

1 Like

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.

@tav - for your reference the animations are appearing on the page https://csmltd.com/medical/travel-insurances

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.

@paul.russam

uummmm - interesting point - I am a Foundation user so I will look into that.

@tav - I’ll also take on board your additional advises and play a little more with the effects as suggested.

Thanks to you both
Paul

This week, I 'ave been mostly eating 3 columns.