Stacked pinning with additional animation

[NickUpdate]

I expect I'm missing something pretty obvious here, but I'd like to have a series of panels that stack, and on each one are animations that complete before the next panel begins to appear. 

There's a blue box on the red panel that should complete its x motion before the orange panel appears. 

 

Appreciate any help on this.

See the Pen WNYaqyb by nickUpdate (@nickUpdate) on CodePen

[mvaneijgen]

Hi @NickUpdate welcome to the forum!

 

Don't be discouraged, but I'm going to dump some info here that will hopefully help you understand what is going on. We all have to start somewhere!

 

Quote

A very common mistake is applying ScrollTrigger to multiple tweens that are nested inside a timeline. Logic-wise, that can't work. When you nest an animation in a timeline, that means the playhead of the parent timeline is what controls the playhead of the child animations (they all must be synchronized otherwise it wouldn't make any sense). When you add a ScrollTrigger with scrub, you're basically saying "I want the playhead of this animation to be controlled by the scrollbar position"...you can't have both. For example, what if the parent timeline is playing forward but the user also is scrolling backwards? See the problem? It can't go forward and backward at the same time, and you wouldn't want the playhead to get out of sync with the parent timeline's. Or what if the parent timeline is paused but the user is scrolling? 

 

You can read more here about common ScrollTrigger mistakes 

 

 

The demo you've forked does one specific thing (really well), but isn't really suited for what you want it to do. What you are looking for is a timeline that controls all the slides one by one and a timeline is the best use case for that. The previous demo created a timeline for each slide, but what I'm proposing is one timeline for all the panels. There where a few things I had to tweak to make that happen.

1. I've created an new element called .allMyPanels in your html
2. I've changed the CSS to have all panels stack, so they are right on top of each other. Just like a stack of cards
3. I've created one timeline outside of the forEach() loop 
4. I've also given the panels a different class, so that we can forgo the first slide, because that needs to be visible on page load

Instead of having the browser move the elements up, I have a tween that moves each panel .from() yPercent: 100, I then check if this panel has a square and if so then that one moves to. Right now this is using a forEach loop. When starting out it is even better to forgo the forEach loop altogether and just write out the timeline one tween at a time. Eg, move the red panel, then the orange panel. It is more writing, but you have much more control over what you're doing and there is always time to optimize later.

 

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

 

See that my previous demo doesn't have ScrollTrigger at all, that is becasue 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. 

 

Here is one with ScrollTrigger. I've put some comments in the code to better explain certain parts. If you have any questions feel free to ask! Hope it helps and happy tweening! 

 

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

[NickUpdate]

Well mvaneijgen, thank you so much. Not just for an answer, but such a generous one. I had read the 'common mistakes' and other 'before you post' things but clearly hadn't grasped some core stuff. You've helped me do that and more. 

 

From your example I've got my code working as I want and in a much more reliable way. Very much appreciate the help. 

 

Switching the panel CSS to display:grid was a crucial bit of help that I hadn't even realised was a path to the solution. 

 

Thanks again.