ScrollTrigger reverse animation using fromTo

[Aamir Mansuri]

When up scrolling on the screen, the animation should be the reverse. 

 

This is the example: the example build in TimelineMax

See the Pen eYJwjKZ by aamirmansuri007 (@aamirmansuri007) on CodePen

 

 

I have update my code with GSAP3 but it's not working.

 

See the Pen yLOyoVr by aamirmansuri007 (@aamirmansuri007) on CodePen

[ZachSaucier]

Hey Aamir. Several things:

• You don't need ScrollMagic or CSSRulePlugin so I removed them. In general we recommend animating CSS variables instead of using the CSSRulePlugin so long as it has the browser support that you need.
• We recommend using the GSAP 3 syntax, not the old syntax like you're using. See the migration guide for more info:
• You misspelled toggleActions. You also had the wrong order for the effect that you're wanting. This is your main issue. Your toggleActions should be:

  toggleActions: "restart none none reverse"

   

• Your tween and ScrollTrigger affecting your progress element should not be repeated for every single image reveal. Put it outside of the .each() loop.

• You create a timeline but don't actually use it. I'd use it and use a singular ScrollTrigger for each image reveal. You can use the position parameter to place things where you want them in the timeline.
• You have a stagger applied to the projectInfo tween but each element only has one element with that class so the stagger does nothing. So I removed it.
• I'd personally avoid using jQuery but I left it in there.
• I'd personally use ES6 formatting (like const, let, etc.) and transpile it but I didn't do that in your project either.

Making the above changes, you should get something like this:

See the Pen rNeavzN?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I highly recommend you thoroughly go through all of the links in my signature below. Doing so will save you a lot of time in the long run!