Search the Community
Showing results for tags 'all'.
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.
I am having some troubles with the document.querySelectorAll() because, I don't know why, it doesn't work when I add more than one class or ID. So, this is what I want to achieve: http://codepen.io/sonder15478/pen/PpJqKN But there's a lot of code that I wouldn't need if I use document.querySelectorAll(). This is where I get stuck: http://codepen.io/sonder15478/pen/xqXGXm I also tried with getElementsByClassName(), but it didn't work either... Any ideas? Thank you!