Cassie

Hi there, I think you meant to send a different pen. Did you save your version?

If it's working in codepen but not on your local site and there's no errors, I'm not really sure what we can do I'm afraid. Typo? Conflicting class names/timeline naming? Incorrect loading of scripts or resources? Caching? My advice would be to strip the code down to the most basic bits until it works and layer up again. Sorry I can't be of more help!

Hard to tell what the issue is without seeing the code I'm afraid. I really would suggest putting a minimal demo together. You don't have to use any distinguishing features of your project. unfortunately ScrollTrigger can't really prevent the address bar from showing - that's a device/browser quirk. Maybe these tips/articles will help point you in the right direction. Invalidate values on refresh: gsap.timeline({ scrollTrigger: { trigger: section.parentElement, scrub: true, invalidateOnRefresh: true }}) .fromTo(section, { y: () => -section.offsetHeight - secti

I'll echo what @OSUblake and @Visual-Q said. This is pretty hard to debug without a look at your setup. Are there any errors in the console?

Hoo boy what a thread. If there's any more questions let's start with a fresh one! 😅

You can tie the progress in to values from a range slider like this. https://codepen.io/cassie-codes/pen/a7fd24fd8d7fd6bfdc25f866bf3c00b5?editors=1011 Doing both scroll and a slider will definitely be possible but you'll have to work out what to do when the slider and scroll conflict. Which values overwrite which?

No worries pal!

I would create a group with the text outlines in and then mask that group with the 'slice' Here's a quick and dirty demo with some text and a polygon. But obviously you could export that slice shape and the text outlines from a graphics editor for a more aesthetically pleasing result! https://codepen.io/GreenSock/pen/XWMwGbR

Nice one Blake 🙌

Hey there, Could you take a look at your resources in this pen and make sure they're linked correctly? Currently the pen's broken so it's a little tough to troubleshoot. Thanks!

Hey there! We can usually help more effectively if you provide a minimal demo, codepen is great for this. It's very hard to understand what the issue is from code snippets alone. When you post a demo - could you also explain what you mean by 'the animation still bugs' You are animating elements and using the same element as the trigger which can cause buggy behaviour, it's best not to animate the trigger element! I often use containing elements as triggers instead. Also - maybe this post will help you with best practises.

No probs pal. 🥳 Look forward to seeing what you make

Hi pal! You can simplify your approach down quite a lot though by using staggers and just targeting the class rather than looping around. If you're looking for smoothness maybe try a different ease, or a different duration? 'sine' is often nice and smooth. https://codepen.io/GreenSock/pen/poeGmqw?editors=0010

Thanks for these really thorough explanations Paul. You're such an asset to these forums. ☺️

You can use transforms (x, y, xPercent, yPercent, rotate) etc to move elements around. https://codepen.io/cassie-codes/pen/2d11cc626340b774c81d6f029722fcf0?editors=1010 Path animations are quite complex, but a lot of fun to dig into. I find they're often overkill for small icon animation though and you can achieve the same visual effect using clever opacity fades between shapes. If you want to go that route, we have a plugin for shape morphing - This is also a good thread should you want to try and animate points by hand. Good luck!