Alternate overlapping sections

[Saeiko]

I've started using gsap about a month or so ago in a nextJs project. It is phenomenal and I'm really enjoying using it, but I have hit a wall when trying to make certain overlapping animations.

 

Here's what I want:

- I have 4 containers. A, B C and D.

- step 1: Container A is pinned and some animations run inside it.

- Step 2: When A's pin is done, B is pinned behind it and is revealed when scrolling down (A goes up and we find B pinned underneath).

- When A is out of the view, do some animations inside B, when they're done B is unpinned and by scrolling down C is revealed (kinda like the opposite of step 1)

- Step 3: repeat step 1

 

Each container is its own component. I have done some research and found some threads that suggest putting the containers in an gsap.utils.toArray but I didn't think that would give me the effect I want. Please correct me if I'm wrong.

 

I have made a simple demo that's a bit close to what I want. In the demo A is pinned, but when the pin is done B pushes A up. I managed to make the 2nd step work (B is pinned and when it's unpinned C is revealed)

 

I have been trying to solve this for about a week now without proper results, your help would be much appreciated.

See the Pen xxverPY by H-Kadir (@H-Kadir) on CodePen.

[mvaneijgen]

Hi @Saeiko welcome to the forum!

 

 

What I would do is tackling the scrolling part first and worry about scrolling later. The best thing to do when working 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. This way you can focus on one part at a time and it will save a lot of headache when debugging.  
  
Most of the ScrollTrigger effects you see are just moving things on the y-axis instead of scrolling them, then hooking that animation to ScrollTrigger will give the illusion of scrolling, but they are really just animating! Getting to grips with this knowledge will make it so much easier to create all kinds of effects, I've written a whole post about it, check it out:

 

 

 

This pen from the collection might server as inspiration. Hope it helps and happy tweening! 

 

See the Pen abMbwYd by mvaneijgen (@mvaneijgen) on CodePen.

 

[Saeiko]

Thanks for the quick reply ! I honestly didn't think of removing ScrollTrigger and focusing on the animation alone (although I've done it before, but I forgot. Am I the only one whom this happens to ?).

 

I've read the article you provided and it is super helpful. The only difference I noticed is that, in all of the demos only one timeline is used, whereas in my case I use a different timeline in each of the components. Can I still make the effect I want work with multiple timelines ? Or am I obliged to use one timeline throughout the whole effect ?

[mvaneijgen]

11 minutes ago, Saeiko said:

Am I the only one whom this happens to ?

Nope, we see this so often that I even have a text snippet explaining this. 

 

12 minutes ago, Saeiko said:

The only difference I noticed is that, in all of the demos only one timeline is used, whereas in my case I use a different timeline in each of the components.

You can make it happen with multiple timelines, but that complicates everting 10x. Creating one timeline with one ScrollTrigger makes things so much easier. I don't know in what Framework you're working, but you can easily dynamically create the animations based on what is on the page and add it all to a main timeline (see https://gsap.com/docs/v3/GSAP/Timeline/#nesting) and then adding ScrollTrigger to the main timeline to control the sub timelines

 

So, no you're not obligated to create one timeline and one ScrollTrigger, but if you can it will make your life a lot easier.

 

 

Hope it helps and happy tweening! 

 

[Saeiko]

Hello @mvaneijgen, I hope you're doing great !

I managed to solve my problem using some of the advice you provided.

 

I'll break it down so if anyone encountered this problem could benefit from this.

First, I made simple sections to remove any distracting animations, then stacked all of them in a grid wrapper (with the css you provided), then used one timeline to control all the animations that I needed (which made things waaaay easier than trying to synchronize multiple timelines, you were absolutely right !), and bam ! Everything worked exactly like I wanted it.

 

I'll include a codepen demo so it's easier to understand.

See the Pen XJrdevX by H-Kadir (@H-Kadir) on CodePen.

 

Thanks again for the help !