Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
d.k

ScrollTrigger + reverse stagger

Recommended Posts

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

Link to post
Share on other sites

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

  • Like 2
  • Thanks 1
Link to post
Share on other sites

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

Link to post
Share on other sites

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 by msnl
missing basic point
Link to post
Share on other sites

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 by msnl
almost there
Link to post
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.

×