How to unpin timeline when last animation ends?

[Captain W]

Hello kind folks,

First off I wanted to thank you for this fantastic tool Now I have an issue which I cannot wrap my head around.

I have a timeline (scene) which is filled with a series of animated slides (sections) and no matter what I change in the end key ( for instance I have  end: () => "+=" + scene.scrollWidth) there is an extra time/space between the last slide and the moment the timeline gets unpinned.

It is as if there is an extra slide that extends the scrolling length. I couldn't figure out if this extension is linked to the background section which is wider (150vw) than its containing parent.

I hope I am clear enough to get some help. Thank you in advance!

See the Pen XWyjmoN by klprt (@klprt) on CodePen

[mvaneijgen]

Hi @wingo-support welcome to the forum and thanks for being a Club Greensock member🎉

 

It has nothing to do with the end trigger or with ScrollTrigger at all. My advise would be 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. 

 

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

 

As you can see in the pen above it is your animation that is doing it, that is why it's so important to focus on the animation at first. You are moving all your sections 100% * the number of sections to the right and that is what it is doing, but your first section is already "in view", so your calculation should be, move all sections to the right times all the sections minus the first sections that is already in view one! Hope it helps and happy tweening! 

 

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

[Captain W]

Hello mvaneijgeny
Thank you very much for your prompt answer. I appreciate it.

I will try my luck taking your advice into account!

Best regards

[Captain W]

Minus one or how to make a fool of oneself  ^^

 

 

Thank you again

[Captain W]

The corrected pen:

See the Pen eYQddgW by klprt (@klprt) on CodePen

[mvaneijgen]

7 minutes ago, wingo-support said:

Minus one or how to make a fool of oneself  ^^

 

Oh sorry, now I've read my comment back I see that this could easily get missed. I could have told you the line number with the correct code. Happy you found it though! Good luck wiht your project 

[Captain W]

Not at all, you were very clear. Thank you!