Need help with this pinned section animation

[JelmerOT]

Goodmorning!

 

I've been struggling for a while now to get this animation to work:

 

What it's supposed to do is:

• Start the title animation before the section is pinned, that way I reduce the time the empty black space is visible between the first and second sections.
• The images should start animating/scrolling when section is pinned
• The images should all have been visible before going to next section
  • Been trying to calculate heights for these images and adjusting the `end` in ScrollTrigger, but no luck so far.
  • The images can vary from amount, so I can't just adjust the bottom to something like `+=3000`

I would love some advice/help!

See the Pen ZEwPzYQ?editors=1010 by JelmerOT (@JelmerOT) on CodePen

[mvaneijgen]

Hi @JelmerOT welcome to the forum!

 

Thanks for the clear demo! This is how I would set it up. Instead of having the images randomly positioned in the y-axis, leave that for GSAP to figure out, so here is your pen with just HTML and CSS. Because all the images are now in a known position, it will be much easier to move them to or from certain positions.

 

See the Pen vYbPBab?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

 

Let's tackle that next. We leave Scrolltrigger out of it for now, because it will only complicate things. I've changed all your .fromTo() tweens to .from(), much easier to read and GSAP is smart and it will just animate to the initial values. I've also decreased the duration of each tween, so that is is easy to debug with and without ScrollTrigger. Indeed it is a bit weird to wrap your head around. Normally in GSAP things work based on durations, but with ScrollTrigger that all gets thrown out the window (not really it still matters if you have multiple animations), but in ScrollTrigger the whole animation gets played over the scroll distance you've set. Check this video if you want a better explanation.

 

For the images tween. I've set it so, that an image takes 1 second to move from the screen at the bottom to offscreen at the top and each image animation starts every 0.8 seconds, so there will only ever be two images on screen. I've made the stagger property in to an object so that we have access to more properties. As you can see the ease property is commented out, but with it you can change the distribution of the staggers, this may be a little bit weird, but check the ease visualiser  https://gsap.com/docs/v3/Eases/ and if you comment out this line you will see that in the beginning not a lot of images fly in and at the end they will be more pronounced. 

 

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

 

The final step adding ScrollTrigger! This is my preferred workflow when working with Scrolltrigger/GSAP! HTML and CSS are really important when working with GSAP it will save you a lot of code if you can bring everything to known values on page load and then animate them from somewhere else. 

 

See the Pen yLZwLLo?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

1 hour ago, JelmerOT said:

Start the title animation before the section is pinned, that way I reduce the time the empty black space is visible between the first and second sections.

As per your last request if you want the text animation to start before everything you'll need two ScrollTriggers, one that does the pinning (and only the pinning) and the current animation, but because this is already a lot of info I thought lets start here and take if from there. I've sprinkled in some comments in your JS, so be sure to read through them!

 

Hoop dat het helpt en succes met je project! 

[JelmerOT]

That is amazing work, @mvaneijgen! Thank you for this.

 

I believe I got it working with two timelines. Except I'd like to change the duration of the images timeline, but reducing the duration changes the space between aswell. Any idea how to reduce animation speed but keep the space between?

[mvaneijgen]

Do you have a new demo I could take a look at?

 

Have you seen this line of my last demo end: `top+=${window.innerHeight * 6} top`, right now the scroll duration is 6 times the window height. Lets say this is 8000px as the total value.

 

Your text animation are 1 seconds each, but they overlap -0.5 seconds so their total is 1.5, but lets ignore it and just say it is 1 second.

 

You have 7 images, their duration is 1 second each, but they stagger in 0.8 seconds, for convenience lets make it an even 1, so in total that is 7 seconds, so the total duration of the time line is 8 seconds

 

This  get stretched over 8000px eg 1 second is 1000px, so your tekst animates over 1000px and your images animate over the remaining 7000px. 

 

If you want to increase either or you have to change the duration relative to the other tweens or/and increase the scroll distance. 

 

It's all a bit weird to wrap your head around, that is why I would always remove ScrollTrigger to tweak the animation that way you can really see what is happening and when you have the feeling that is correct add ScrollTrigger back in. 

 

Beter kan ik het niet uit leggen 🙃 je moet gewoon even spelen met de values tot dat je het gevoel hebt dat het goed voelt. Nogmaals hoop dat het helpt en veel geluk! 

 

 

[JelmerOT]

Thanks! I got it working with your example, adding a seperate timeline for the title and adjusting the window.innerHeight multiply value.

 

Fijn weekend!