Dynamic pinned animation based on number of items

[amit95]

I have posted a previous topic regarding this animation before (which can be found here). The original question was resolved, and now I'm looking for solutions on how to make it dynamic (hence the new question).

 

In short, I have an animation which pins, then fades in new text items, whilst at the same time, fading out and translating up the first text item in view.

 

In the demo, you can see the section unpins when there is two text items still visible, which is correct. At the start and end of the animation, two text items should always be visible.

 

Now, I've got the same module on another page, but this time, it only has 3 text items. In the below demo, it unpins when there's only one (the last) text item visible.

 

I can see why it's happening (line 86 onwards in the JS), but, if I tamper with that code, it'll break the section which has 4 text items in them.

 

Is there a way I can make it so that in all instances of item count, it will always show 2 text items on entry and 2 on exit?

 

See the Pen MWGENqP by amit_rai95 (@amit_rai95) on CodePen

See the Pen ExLWvRX by amit_rai95 (@amit_rai95) on CodePen

[Rodrigo]

Hi,

 

This, as well as your previous thread with four elements, relates to handling the logic to dynamically create instances in a timeline and not a GSAP specific issue. It would be a good idea, as I believe @mvaneijgen suggested you in your other thread, to test animations without ScrollTrigger first since it's easier/faster to find and resolve issues. This seems to work as you expect and the code is far simpler and easier to follow and debug:

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

 

Happy Tweening!!!