Scroll Trigger Reverse Problem

[MaryamZafar]

Hello!

 

First of all can I just say this framework is AWESOME. 

 

I have a problem - this website, when I scroll down, everything is fine, but when I scroll back up, all my text elemets beautifully reverse their animation, except for the first case study block, which does not fade out but just suddenly disappears if I reverse before reaching the end. How do I fix this problem? The JS code is exactly the same for all of them.

 

here is a screencast: https://drive.google.com/file/d/1uugbp9_ta6RLQjBYexZI-bop8qa-b1mq/view?usp=sharing

 

This is my code:

gsap.from("#case-study-1", {
  scrollTrigger : {
    trigger: "#case-study-1",
    start: "20px 80%",
    toggleActions: "play none reverse reset",
    markers: true,
  },
  y: 200,
  opacity: 0,
  duration: 1
});

 

[ZachSaucier]

Hey Maryam and welcome to the GreenSock forums. 

 

I'm guessing it's because of the last parameter of your toggleActions: reset. Try changing it to none instead and see if that fixes it.

[MaryamZafar]

Hi! Thank you for your reply - If I change the parameter to none, the reverse doesnt work at all - the image fades in on scroll down, but stays there when I scroll back up...The code on the website has also been updated if you want to take a look please.

 

here is an updated screencast:

 

https://drive.google.com/file/d/1hjZWQ-1BZrNanyqmAJgYhyMlBlq2i4dQ/view?usp=sharing

 

 

[ZachSaucier]

You changed it to this?

toggleActions: "play none reverse none"

If you'd like debugging help please make a CodePen.

 

[MaryamZafar]

My sincere apologies on not creating a pen. 

 

Here it is: 

 

See the Pen gOrbZEj by meeyamzafar (@meeyamzafar) on CodePen

 

You can see that the same behaviour is happening as I explained above. 

 

Thank you so much for the help.

 

[ZachSaucier]

Thanks for the demo. You didn't change the toggleActions to what I suggested, but my suggestion was off anyway. Try 

toggleActions: "play none none reverse"

Is this the effect that you're looking for?

 

Side note: you could make your code more DRY (Don't Repeat Yourself) by using a loop to create these animations and ScrollTriggers since they are the same besides the targets. I talk more about how to do that in my article on animating efficiently which I highly recommend.

[MaryamZafar]

THANK you so much. I will look into your article. Always a great help when pros share recommendations.