SamStAubyn

Knew it would be something super simple, thanks!

As title says, I have an SVG path that on scroll goes from 100% length to 0% effective disappearing, when I add an element to it, it naturally follows the path but in reverse to the direction that I need it to go in. Currently I have duplicated the same SVG, used illustrator to invert the data points then added it inline with no stroke with to achieve the desired result, but now I need to add it to multiple paths and it's very time consuming to do this for all of them, is there a way I can just reverse the direction? Have attached a codepen with just my HTML and JS just to show how I'm doing it currently.

Yeah this works perfectly thanks! Question though, I would have thought the align arg would inherintly align the element to the start position of the path it would be tracking, is this something that will be included in future updates or is it left open so that the tracking element can be tweened prior without any interuption?

I'm trying to get the image in the codepen to track with the line animation. For some reason the start position of the image element is in the top left of it's parent container, I assume I'm missing a trick here to get it to start at the beginning of the svg path, as once you scroll it then aligns.

I solved the alignment issue by removing the display: gridand replacing it with display: inline-block

Perfect I just set the position parameter to the duration instead of the stagger and it has resolved the issue! Now to figure out this pesky alignment problem...

Hi @mvaneijgen, On second look, I want the same animation style that is in the video at the end of the stagger, so I want the word to be completely deleted then the next one to be written in. At the moment it is typing out the next word before the first one has been removed if this makes it easier?

Thanks so much this is super helpful! I tried approaching this a few ways, the final js code you see there is part my code, partly generated from a certain OpenAI tool. It got me close enough but the timing and ultimately final animation just wasn't what I'm after. Will need to adjust the final looping animation as it's currently not staggering correctly but I'm sure this is something I can play around with and figure out.

I have some text that is typed out, then on the end of the string I have an array of words that I want to indefinitely loop through, I feel like im very close but I cannot get the array to loop through more than once, how could I achieve this? Bonus points if the cursor can actually align with the text as it is typing out. This has now been edited to show the correct solution

Thanks, my content now pins to the top of the screen though instead of staying centered? Also, if I then wanted to add more steps to my timeline such as an exit animation how would I add this?

I've expanded on my previous exploding animation to get the icons and svgs to bob in place once the animation has compelted, I found it has a weird behaviour however where it forgets the previous y origin coordinates and then when I fire the repeating loop it animates from 0 instead. My fix for this was to set the x and y before each animation fires but surely there must be a better way than this? I tried creating another function altogether but that had the same issue where the x and y coords we're not being preserved between functions. NOTE - I've noticed that in the codepen the explosion animation from the centre doesn't seem to fire as expecting and all the svgs come from the centre as expected.

I'm an idiot, I didn't have my option within the function bracket so it wasn't being detected.... For reference for those who discover it - it should be as follows: tl.to(".cover-content", { scale: 0, duration: 0.5, x: 0, }, "<");

I'm trying to fire the first two tweens simultaneously, so the blob and the text should scale away at the same time, but they always fire one after another, how can I fix this?