ianatkins

Hey Rodrigo, Thanks for the links, didn't know you could do native text on the path in the SVG itself. Think the motion path is a bit nicer, as you get the rotation. I've updated the original pen ( above ). Have found the function callback option on the stagger to define the delay from the start, which I think it what I needed: https://gsap.com/resources/getting-started/Staggers/#function I'm looping over the characters, take the total width of the current characters shown and normalise that to the screen width and total animation duration. Kinda of getting there. Think there's two issues. 1. Not sure how / where i'd define the 'repeat: -1' I had on the stagger before, have moved it to the 'to' animation but it doesn't seem to loop seamlessly now. 2. Weirdly on this version the 'i' seems to be off the SVG path slightly, and be above or below it. https://codepen.io/addedlovely/pen/jORbZbB Cheers!

Hello. Have got a scrolling marquee setup that animates along a SVG motion path. ( Thanks for the demos / references, got quite far! ) Reduced test page below: https://codepen.io/addedlovely/pen/jORbZbB The kerning all looks a bit off because i'm staggering the animations using 'each' ( so spreading each letter across the duration of the animation with an equal timing). This looks bad for 'i' and other letters, and think ideally I need to stagger the animations relative to each letters width. Any pointers on how to achieve this, or maybe there is a simpler approach?! Thanks. Ian.

@mvaneijgenGreat thanks very much, spot on and all makes sense. I had tried setting start to 80, but it didn't seem to work - will check out the + notation. Thanks! Last query, is there anyway to apply a multiplier to the scroll amount, essentially slowing the translation by a factor ( e.g. for every 1 pixel scrolled the element is translated 0.5, or similar )?

Hey Greensock. Thanks for the reply! My intention is to move the image at a slower rate than the normal scroll speed - so that a larger image asset is not needed. Isn't the code translating the image element down 20%, over the scroll height of the .hero-image element? In which case when the page is not scrolled (0) the translation should also be 0. Or have I misunderstood? Perhaps there is a simpler way. Can I apply 0.5 of the scrolled window offset and use that as the translate value? ( again think this should avoid needing to oversize the asset ). Thanks, Ian.

Hello. Have an image that I'm parallaxing with the window scroll. Can see in the codepen example. The to animation doesn't start at 0, but is 2 - 7% off depending on the screen width. https://codepen.io/addedlovely/pen/YzvNBXp Note in the preview below the codepen looks ok, on larger screens there is a black line above the image ( as the image is translated down already ). Am new to GSAP so apologies if this is a basic question! Thanks, Ian.