Unsure where to start

[codi]

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..

[PointC]

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:

 

https://greensock.com/jump-start-js

https://greensock.com/get-started-js

http://codepen.io/collection/ifybJ/

 

Happy tweening.

[OSUblake]

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

.

[OSUblake]

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