Jump to content


Unsure where to start

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

I have been trying to accomplish a nice animation tween and have been unsuccessful, I have tried scrollmagic watch videos no good result, I have been at this for a week and 3 days from stack overflow to the end of google and back still unable to get any help..


this is my jsfiddle https://jsfiddle.net/r9bdrker/24/ it is basic setup,


I have 3 classes .header is my main class, then i have .active   .fixed  . offset



when you load the page the default classes should be  header active offset,   then when you start to scroll it should remove .offset and add .fixed this should make the nav slide down smooth..  that part works great.. my problem is when scrolling up the nav dont slide back up and the default links don't return.



I am at the point of scrapping it... :-(


so I looked at scroll magic and ran across this in searching any help would be appreciated..

Link to comment
Share on other sites

HI codi  :)


Welcome to the GreenSock forums.


It seems that you're using CSS transitions for your animations and adding/removing classes to activate them. We do have to keep our support focused on GSAP here. You could easily accomplish your desired animation with 1 GSAP timeline that would play/reverse depending on scroll position. If you want to create your animations with GSAP, I'm sure we can assist you with any problems.


If you need help getting started, please take a look at the following resources:






Happy tweening.


  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

HI @codi,


I think the problem is that your animation is a sequence, so it has to be reversed a certain way. Scroll animations like that usually have a start and end position, but you're just toggling everything at 300px. And it's best to keep fixed stuff fixed. You can't animate a position property. 


Like @PointC said, that would be pretty easy to do with 1 GSAP timeline, and you would have total control over it's behavior. There's a reason most scrolling animations use GSAP. You have complete control over everything. 


Here's an example of a material design header with parallax fading backgrounds. I'm manually stepping through the progress of the animation based on the scroll position. Try it on a mobile/touch enabled device too. It plays really nice.


See the Pen ?editors=1010 by osublake (@osublake) on CodePen


Link to comment
Share on other sites

Moved this to the regular GSAP forum. We get a lot of scrolling questions asked there.

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.