Horizontall scrolltrigger with animated child elements

[ZachSaucier]

You just need it to be relative:

end: () => '+=' + (container.scrollWidth - document.documentElement.clientWidth + container.offsetWidth)

 

[nevanthegreat]

On 7/24/2020 at 5:19 PM, RobbieC said:

Hey guys,

I just wanted to share my version of a similar codepen that I had built when ScrollTrigger was in beta but after coming across this thread I actually made some tweaks. So here is my updated codepen: 

 

 

Right now it works as planned in Codepen @ZachSaucier maybe you could do a quick quality check on my gsap code?? 😅

 

I did come across an issue when I took my code and placed it in another project on my localhost, the padding & height in the "pin-spacer" are not populating correctly. The project I placed it in has a bunch of timelines, scrolltriggers and another scrolltrigger pin section. So its going to take me some time to create a Codepen to recreate the issue.

 

This is dope af

[DoneBySimon]

Thank you all for the examples in this thread, very educational

 

I also want to animate child-elements (I initially went with a second scrollTrigger and start & end functions... I took a wrong turn there  )
Thanks to this post I went the duration & stagger way, that seems a lot simpler, but I can't get it as tight as I want.

I've made a codepen example to illustrate what I mean:

See the Pen poEgjwz?editors=1010 by simonvanherweghe (@simonvanherweghe) on CodePen

 

What I would like to improve:

• Watch the black boxes, I would keep them in sync with the snap from the scrollTrigger. Take B for example, that from-animation is already done 'long' before the yellow card has reached the beginning of the screen. When you look at the last one, E, that animation perfectly stops when that red card snaps in place. My train of thoughts is as follow: 5 cards, so a duration of 5 (since we're using scrollTrigger, duration is all relative, right?) When every animation takes exactly 1 and they are all distributed 1 apart from each other, things should be ok. But it isn't, why? Is it the scrub:1 delay?
• The first one should be already into place, hence the from:1. But that isn't quite the solution. Should I adjust the selector or is there an other way?
• I want the opposite animation (black box slides in from the left) when we scroll back.

  See the Pen pojzxwZ?editors=1010 by GreenSock (@GreenSock) on CodePen

  suggests the use of functions, although I'm not afraid of that, but euhm, is there any other way? 

[ZachSaucier]

3 hours ago, DoneBySimon said:

duration is all relative, right?

Yep. More detail about that here.

 

3 hours ago, DoneBySimon said:

Is it the scrub:1 delay?

Nope, the scrub doesn't affect the end position. A numerical scrub just affects duration it takes to get there.

 

3 hours ago, DoneBySimon said:

When every animation takes exactly 1 and they are all distributed 1 apart from each other, things should be ok. But it isn't, why?

You have 5 panels but the distance that you're moving the containers isn't 5 of their widths, it's 4 of their widths. But that's not the main issue.

 

The main issue is that your first panel is already at the position when you want the child elements to finish their animation for every other panel. Do you understand what I mean? You need to take that into account. I am not sure how you want it to animate given that fact. 

[ZachSaucier]

After re-reading your question, maybe you want it to be like this?

See the Pen wvzMLLZ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

4 hours ago, DoneBySimon said:

I want the opposite animation (black box slides in from the left) when we scroll back

That's a completely different effect. To do that you'd have to create you animations beforehand, manage which one needs to play, take into consideration that they may be partially on or off screen, update their progress in the scrub's update callback, etc. It's far from easy. I don't recommend trying to do both that and scrubbing.

[DoneBySimon]

Oh, thanks for the input. I did some tweaks on the duration & stagger properties, but never took your approach, nice!

 

I've managed to create the opposite animation by just doing... the opposite

See the Pen PoGzYmZ?editors=1010 by simonvanherweghe (@simonvanherweghe) on CodePen

beauty in simplicity