Leaderboard

@Rodrigo Thanks! That's what I ended up doing. Once you get the hang of going back and forth to the ease visualizer (it would just be impossible without it) you begin to see the relations between the curves and the path movement. It's laborious but interesting! As a reference for anyone trying this approach in a framework with SSR (I'm using Next.JS) always leave your markers on until you are done! I came across a problem with the ScrollTriggers getting moved up when I refreshed the page (because the whole document wasn't ready), and only noticed it far ahead. Had to implement a fix (A ScrollTrigger on the 'body' with a ScrollTrigger.refresh();) and had to start over... I would have noticed the markers being offset if they were on... <<trial and error>> indeed. @GreenSock This helper function is like magic to me! Your initial description says it all <<Helper function that returns an ease that bends time>>! I love it. It's beyond my current coding full grasp, I can kinda read the code, but towards the end get lost in its complexity. None the less it mostly works. I'll definitely use it eventually. Thank you both! As always, the best community I've ever seen.

Hey @Fat Pixel sorry I forgot to reply! I ended up going with mvaneijgen's suggestion and it worked out great! Your great-things website looks fantastic!

Hi, You can use ClipPath instead of transforms: https://bennettfeely.com/clippy/ Here is a simple demo: https://codepen.io/GreenSock/pen/VwRQoPB For the background color you can follow this tutorial by @Carl: Hopefully this helps. Happy Tweening!