Search the Community

Hi I have strange problem with an animation that I can't get my head around. I have an animation that is dependent on window size - a simplified codepen is above and simplified code below. Basically it's set so that if the window is greater than 1024px the animation fires, if it is less than 1024px the else part of the conditional logic is set to an animation lasting 0 seconds to effectively prevent the animation happening. I've predominately done this because the elements change dimensions quite markedly on mobile so the animation wouldn't really work. At first glance the above all works OK, and on the actual site I have the reverse: false; property on scroll magic so it only fires once (i've taken this off the codepen so you don't have to keep reloading the page). PROBLEM When the window is bigger than 1024px the animation fires (desired behaviour) When the window is less than 1024px animation does not fire (desired behaviour) When window is loaded above 1024px, and then the window is resized below 1024px, the animation still fires (not desired behaviour) Now, the normal solution would be to just add an event listener that triggers on a resize event, and pass the name of the function holding the tween into the event listener. However because the trigger is scroll magic, I can't do that because it creates a second instance of the function being called and basically doesn't work. The actual site is now finished and this is the final issue, I just seem to be going around in circles. Does anybody know how I can have it so when the window is resized after loading, the else part of tween takes priority and the tween effectively doesn't animate? P.S. In the future I'll just add an identical section that only shows on mobile, that is hidden on desktop and swap them out, but because this animation is happening on a wordpress site with a large homepage, I'd have to rename so many elements (and their equivalent stylesheet info and JS variables) because I've used the class names that are dynamically generated by the wordpress theme, and adding a new section basically changes the names of them. I can't believe I've got myself into such a ball-ache. As well as the simplified codepen, here is the simplified JS for quick reference function theAnimationTween() { if (window.innerWidth > 1024) { var tl = new TimelineMax(); tl.to("#box", 0.5, {x: 200}); } else { tl.to("#box", 0, {x: 0}); } return tl; } var controller = new ScrollMagic.Controller(); var blockScroll = new ScrollMagic.Scene({ triggerElement: "#box", triggerHook: 0, }) .setTween(theAnimationTween()) .addIndicators() .addTo(controller);