At scroll, move 3 div horizontally with delay between them

[Iks11]

Hello there,

I'm trying to use gsap to animate some div at scroll on my future website.
On one of my section, I want to move 3 div with delay between them when the user is scrolling down. I'd like to animate them like the .gif below.

I can't find what I want on the internet... (I'm probably doing it wrong 😔). Some codepens are close to it but it's not really the effect I'm looking for...
Do you have any codepen, links or tips on which I can be inspired ?

Best regards

 

The desired animation :

[Rodrigo]

Hi @Iks11 and welcome to the GreenSock forums!

 

Normally we require a minimal demo in order to help users around here, since it gives us a better chance to see what the users are trying to do. In your case the Gif is enough to get a good idea of what you want, so that will be enough this time, but for future references remember the minimal demo (look at the link to learn more about them).

 

ScrollTrigger is build for this type of scenarios and the setup couldn't be more simpler:

See the Pen eYKBgoK by GreenSock (@GreenSock) on CodePen

 

Let us know if you have more questions.

 

Happy Tweening!

[Iks11]

Hi @Rodrigo,
 

First of all, I'm sorry I didn't send you a Codepen, in fact I didn't know what to do, that's why I sent you this gif which illustrates what I want to put in place .
 

Finally, thank you for your help, I see a little more clearly. Thank you!

I have another question : I would like to know if you know how I could combine 2 animations one after the other in the same section before going to the next one. Below is the codepen illustrating what I want to do: First, animate the 3 blocks (by the way, what is the parameter allowing to make them go out of the screen?), and once this animation is done, make a rotation while making a translation of the orange block to make it disappear on the right of the screen.

See the Pen ExRwpLq by iks69 (@iks69) on CodePen

Best regards

 

[mvaneijgen]

1 hour ago, Iks11 said:

 I would like to know if you know how I could combine 2 animations

In GSAP that is called a timeline.

 

What I've done is move all your ScrollTrigger logic to a timeline. Then on that timeline I've add all your separate tweens. With this way every tween plays right after the previous one.

 

1 hour ago, Iks11 said:

by the way, what is the parameter allowing to make them go out of the screen?

 

@Rodrigo has done something really smart for that. Your elements are already at there 'end' position (where you want them to be when they are done animating), then it is only a of question animating them .from() somewhere. In this case they've told them to animate from the width of the current screen let's say the page is 1500px wide, window.innerWidth gets you this value. 

 

 Personally I've found that the best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.

 

See the Pen BaVwGZZ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Then when you're happy with the animation, you can turn ScrollTrigger on again and see how your animation (timeline) would work on scroll. For this example I've told ScrollTrigger to pin (pin: true) your elements while animating, so that they are stuck in the browser view until the animation is done. I've also changed your start and end values a bit. Hope it helps and happy tweening! 

 

See the Pen gOKGQXm?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

If you want to learn more about ScrollTrigger I highly recommend taking a look at the Greensock YouTube channel, there are some amazing videos on there that help you get started with all the GSAP tools!