Weird Bug when using Scrollmagic/TweenMax with Show/Hide Js

[ran913]

So i'm currently working on a page that has animation when you scroll down the page using scrollmagic and tweenmax. I've pinned the appropriate sections and created the animation, and everything works perfectly.

 

I then added some javascript to have a show/hide function for the different features in a sticky nav (instead of having a long vertical scrolling page, it swaps out content within the same area). I noticed a very weird bug when I switch between the different sections. Here's a screenshot of what the bug looks like when I go back to the original section with the animation. It seems as though the tweenmax plugin is ignoring all of my css and completely breaks. What's even weirder is that when you start to scroll down the css is restored. Any ideas on what this is? I can't seem to figure out what's causing it.

 

 

 

[Carl]

Hi and welcome to the GreenSock forums.

 

Very glad to hear you had such success with GSAP and ScrollMagic.

 

I'm not a ScrollMagic expert by any means but here are some things to consider:

 

ScrollMagic very precisely controls the playback of a timeline based on scroll position. The tweens in those timelines have tweens that have starting and ending values recorded typically once those tweens render for the first time. Any time you create a new tween outside the timeline you run the risk of possibly overwriting a tween in the timeline (normally when 2 tweens compete for control of the same property, the newest tween will kill the pre-existing tween).

 

All that to say, once you try to modify your page with your own script there is a very high likelihood that you are doing something that will conflict with values that should only be controlled via ScrollMagic.

 

My guess is that when you start swapping content in and out you may be changing the scroll position of the page thus forcing your timeline to jump to some odd spot that is then forcing tweens to be overwritten or perhaps record bad starting values. 

 

It is extremely difficult to diagnose from a screenshot, which is why we strongly recommend providing a reduced test case that we can experiment with as described here: http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Again, I'm no expert but my guess is that the ScrollMagic folks would strongly recommend against any external DOM manipulation after your ScrollMagic timeline has been created. 

 

Might be worth making a very simple demo and posting a link in the ScrollMagic git issues:

https://github.com/janpaepke/ScrollMagic/issues