clear props for all tweens

[Buntafujiwaaa]

I'm trying to disable all animations in mobile viewport.

 

 

I'm using enquire to detect and init animations depending on screen size. And Scrollmagic for scroll based animations. I disabled scrollmagic controller in mobile viewport.

All scenarios work perfectly except one. In the event where the user starts from a deskstop and resizes to a mobile viewport, the element doesn't get trigger since properities are already applied.

For example, an element has autoAlpha: 0, then in mobile viewports -> controller gets disabled -> autoAlpha is still applied and doesn't run. This is intended behaviour but is there a clear all properties for all tweens?

Currently, I'm using one of these two methods.

First method
I put transform: none !important or opacity in css using mobile media query, depending on what tween properties I'm using.

Second method
I use $('*[style]').removeAttr('style'); to get all elements with style attribute and remove the inline styles.

I'm just curious if this is advisable? Both works, but just thinking if there's a better approach that I'm unaware of.