andre1melo

@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.

I think I'm getting there. I've split the path into 4 sections (they match the webpage sections it will be integrated in) and I'm building Custom Eases for each ScrollTrigger. It's not the precise 50% viewport follow along I wanted, but it's fine, kinda more organic actually. What an amazing set of tools you built! But if anyone still knows a better way, please let me know. Thanks! a1m

Hi, I've come to the mighty forums as I can't figure out how to get a complicated squiggly SVG path to always draw alongside the scrollTrigger (for example 50% of the viewport). (As a @Carl student I feel like I should be able to figure this one out 😅, sorry.) I tried to find any hint on the forums, but nothing seems to fit my particular question. My objective is that the line is drawn always at a fixed position of the viewport (for example 50% of the viewport like in the demo), instead of its natural mapping to the line full length. I've created a basic demo. https://codepen.io/andre1melo/pen/bGJLqoY I am trying to replicate the effect of the blue line in https://cursor.sh/, albeit with a much more squiggly path. Could anybody just point me in the right direction? I'm a quick learner. Thank you so much! P.S.- My crazy idea so far is to create an CustomEase with the shape of the SVG path?!?! Didn’t seem to work when I clumsily tried. a1m

Thanks💚, GSAP is really bringing me a familiar feel in these changed times. I'm very aware of @Carl and his amazing courses over at https://www.creativecodingclub.com/bundles/creative-coding-club?ref=44f484. So much so, that I'm now in them for life(time)! Which brings me to my question (sorry as it has not much to do with the post). Do you support Parity Purchasing Power for Club GSAP? @Carl over at Creative Coding Club does, and that swiftly convinced me to get on board. Now that he's teaching me so much, I'm even more eager to enter the Club GSAP to be able to use all the Plugins on my website, and hopefully after some clients 🤞.

Well now I'll really have to do it. This kind of kindness and community sense is priceless. I'm getting back into Front-End development after a loooong pause, and finding GSAP made me travel back to a joyful time when I was working with Macromedia Flash and ActionScript (like @Carl mentions in his amazing courses). Thanks again!

Crystal clear! Thank you so much. I got everything working on my main App with your tip! I had a hunch it had to do with useRef when I looked into https://codesandbox.io/p/sandbox/gsap-scroll-trigger-react-with-usegsap-hook-background-cahnge-l8j2df?file=%2Fsrc%2FApp.js. But I was missing the "scroller" on the ScrollTriggers for my particular situation. Clearly I still need to dive deeper into your documentation. Thanks again! As soon as I can spare some $ (not easy with kids hahaha) I'll get GSAP Premium even if just to support your work and this wonderful tool.

I'm trying to figure out if this is an issue with GSAP or something I can't understand in CSS. In this React app I'm developing I have a parallax effect "gallery" that forces me (as far as I can tell) to wrap the whole app in a wrapper with a fixed height, overflows and perspective in order to work. When I set this wrapper to the needed fixed height of 100vh, this seems to break the simple type GSAP animations I have setup further down. I know that if I set it to "min-height" the GSAP then works, but then it breaks the parallax effect. Here is a minimal demo (without the whole parallax effect mentioned) of it working with the ".wrapper" "min-height" that I cannot use. Simply remove the "min-" and see how it breaks the GSAP animations. https://stackblitz.com/edit/stackblitz-starters-q9gfur?file=src%2Fstyle.css Can anyone shed any light as to if this is a GSAP issue? Or any solution would be highly appreciated of course! Thank you very much andre1melo P.S.- Minimal demo sections props to DesignCourse - Create Modern Text Scroll Animations.