Cassie

That's so nice of you to pop back in with some gratitude, thanks Matt 🥰

bumping @Prasanna again (sorry for multiple bumps but I'm not sure of how to help here)

Ahh I love him, that's a fun exercise!

You should just be able to replace the image with a lottie container (or the inner SVG) without issues, they're just DOM elements after all! Pop back if you struggle after watching that mini tutorial ✨

I reckon most things are achievable, it just takes a little bit of thinking outside of the box sometimes. ScrollTrigger/ScrollSmoother/FLIP (a lot of the new GSAP3 tools) are different beasts to old GSAP - we certainly feel this from a forum perspective too, the complexity of the animations people want help with nowadays is far beyond what it used to be. It's not that the tools are broken, it's that they're trying to make a huge number of complex problems possible and trying to work around a lot more edge cases, there are so many more intertwining things to be aware of. We do our best to add in solutions where we can but as with anything code-wise there will always be limitations to work within. It's mega frustrating when you hit those limitations though. I've been there. That being said. Solutions! Ok... So here's one idea, pinning the entire content is going to cause issues, but you need the initial content visible and static underneath the 'slide'. So maybe pop that first section of content out into it's own container, make sure it's 100vh and then allow the rest of the content to catch up after it? https://codepen.io/GreenSock/pen/rNvdvXp?editors=0110 Anther option is to create a big animation timeline that does what you want - then hook that up to the scroll. It doesn't work for everyone's use cases but it can sometimes make otherwise impossible things nice and simple.

Hey there! So the one way that I can think of is extending out the 'hitbox' of the link so that there isn't any overlapping white space in between them. You could add a styled div inside the link to make it look like there's space between the buttons, but in actual fact the links are pressed right next to each other. The other way would be to show the 'mega-menu' when the UL is hovered, but swop out the content depending on which list item you mouse over. Definitely more fiddling around with layout and JS events than GSAP!

Sure you have it covered, but it's fun to discuss. Simplest thing I've found is a direct comparison to background-size and background-position. That seems to click for a lot of people. That and making it clear what the SVG element bounding box is as opposed to the viewBox. I have a little UFO in my workshop and I make people float it to the top/bottom left/right to get used to the values.

Well the helper function covers everything you could possibly need to do horizontal looping, and it does it all for you. Here it is simplified down without the controls. Is there something it particular that you're confused about? https://codepen.io/GreenSock/pen/eYrMNQx?editors=0010

Here's a helper function for you! https://greensock.com/docs/v3/HelperFunctions#loop

Sorry you've stumbled on an issue. GSAP should certainly be working this out for you, (and will figure it out for you once we work out the problem.) Tagging in @GreenSock - He'll be able to help. Jack - Here's an even more minimal demo - you can comment in/out the ScrollSmoother code to show the issue. https://codepen.io/GreenSock/pen/BaxYXvo?editors=1010

I think this is due to the lack of physical space to scroll into - I added a spacer and it allows you to scroll to the bottom. https://codepen.io/GreenSock/pen/KKRoKwr?editors=1010 @akapowl is the resident ScrollTrigger pro so I'm sure he'll have a better explanation!

Yeah I've been loving the SVG lessons! Really great stuff!

They've hidden the scrollbar for aesthetics (such as many awwards site's do 😂) But actually Lenis itself doesn't hide the scrollbar, it feels like their site shouldn't hide it tbh as the accessibility of it is quite a good selling point.

Ah ok, if you're using React it's going to be a little bit more fiddly, both to set up a demo and to get the animation working! That code you've provided above doesn't look valid. Here's a starting point - https://codepen.io/GreenSock/pen/PoeQePv?editors=0010 I suggest taking a look at our React guides too for a little more understanding of how to handle different situations 🥳

Heads up that the elements don't scale in in chrome due to this newly introduced rendering bug (not a GSAP bug - a browser one 🐛) https://bugs.chromium.org/p/chromium/issues/detail?id=1368232 If you add a small rotation to the group it fixes the issue https://codepen.io/GreenSock/pen/qBYxoyX?editors=0010