Jump to content
Search Community

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

ran913 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.





Link to comment
Share on other sites

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:


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...