Scroll Trigger: Triggers not moving with defined elements

[andybarefoot]

I'm trying to animate a spiral opening up as the user scrolls the page.

I'm using Scroll Trigger to:

 - use morphSVG on the "stripe" to change its shape

 - change the height of the containing element so that they are more spread out.

 

Unfortunately as the first elements get larger the trigger points for the subsequent elements don't move to reflect their new position but remain in their original position.

 

(From the attached image you can see that the triggers have remained equally spaced even though the stripes are not.)

 

Does anyone know how to adjust this so that the actual triggers move with the elements that have been defined as the triggers?

 

BTW, my code, as shown in screenshot, is working locally but not in Codepen: 

 

Thanks,
Andy

See the Pen 194e0765585feb04ad3c6d98c5c79454 by andybarefoot (@andybarefoot) on CodePen

[mvaneijgen]

Hi @andybarefoot welcome to the forum and thanks for being a club member 🎉

 

You've set your Codepen, so that nobody can fork your work, which makes it harder for us to modify your code.

 

Right now you're running in to the classic 'you should not be animating your trigger element!'. It is always better to wrap your element in a parent element and use this as the trigger. In this case you can also see you're creating several ScrollTriggers where I think you could easily create one ScrollTrigger with one timeline and animate all your elements on that timeline and then have one ScrollTrigger that controls that timeline. 

 

At the moment I don't have time to set this up, but if you allow forking of your pen someone will be here shortly with some solution. Or you could try my suggestion above. Hope it helps and happy (new year) tweening! 

[andybarefoot]

Thanks @mvaneijgen! Happy new year!

I have now made my demo Pen public.

 

 

 

[mvaneijgen]

Thanks. Here is a solution. I've created a timeline forEach() li on the page and add your two tweens to that timeline, then I've attached a ScrollTrigger to that timeline to control the animation. (So we've reduced the amount of scroll triggers needed by half!)

 

onLeave() of every ScrollTrigger (when the end trigger hits the end) it gets all the ScrollTriggers on the page and .refresh() them. I've also add an extra div to each li and use that as the element that changes height, because you're better of never animating your trigger element!

 

I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! 

 

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

[andybarefoot]

Thanks for the help  @mvaneijgen!

 

I'll take a closer look at your code and see if I can work out how it works.

 

Thanks!
Andy