ScrollTrigger + reverse stagger

[d.k]

Hello,
I'm new to GSAP and very happy with it so far. I have an interesting problem and I can't find any codepens or topics containing useful info. Actually I am not sure if this is even possible.

What I'm trying to do:
Elements are fading in inside a section, when you scroll to it. When you scroll past it the elements fade out again and when you go back up they fade in again. I'm using stagger to animate the elements inside the section. Is it possible on scroll up to reverse the stagger effect, I would like the elements to fade in from the last one to the first, but only when scrolling up. I know that using a negative value for the stagger does that, but I'm not sure if you can combine it with the toggleActions somehow.

All ideas are welcome, thank you :)
 

See the Pen RwrBvaW by DariaIvK (@DariaIvK) on CodePen.

[ZachSaucier]

Hey d.k and welcome to the GreenSock forums.

 

The trick to doing this sort of thing is to actually make use of ScrollTrigger's callbacks. We show an example of doing different animations based on the scroll direction in this pen (the same technique is used on the GreenSock homepage):

See the Pen pojzxwZ by GreenSock (@GreenSock) on CodePen.

 

In your case you could set it up using two separate tweens that override each other:

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

[d.k]

Thank you for the tip and fast response. It's just what I needed and works perfectly with callbacks! ❤️

[msnl]

I'm trying to replicate this while making each "box" appear at once as it enters the viewport as in this example

 

EDIT: I'm talking about view in mobile, with each box in a column.

Now, i'm still a newbie and it's 5.29am here, but shouldn't setting the trigger to "box" and the forEach loop take care of this?

 

This is what i got

 

See the Pen ExyVKRd by msnl (@msnl) on CodePen.

 

Edited October 13, 2020 by msnl
missing basic point

[msnl]

Ok, i may have missed the focal point in my previous post, if you are a newbie like me and reading this i can only say 2 things:

 

1 Get some sleep when you need it
2 Read the documentation

 

What i was trying to achieve was the effect shown in the second post while having each box appear at once ON MOBILE (forgot this in my previous post), and ScrollTrigger.matchMedia seems to be what i needed.

 

Now i only have 2 thing i would like to solve.

 

-On desktop, if i leave the section with the boxes and go back to it before the animation has finished i get some messy behaviours, mainly boxes still being visible. I try to set everything back to "default" with a 0 duration tween, no luck.

 

-On mobile, i'm trying to have the boxes appear from the top instead when scrolling back up  solved thanks to the example

 

This is a more like it pen, i'm sure there's better way to do it but i prefer to get it working before cleaning it.

 

See the Pen LYZpWNy by msnl (@msnl) on CodePen.

Edited October 13, 2020 by msnl
almost there