animationmagic

I'm having the same issue, when trying to npm install gsap in my new nuxt project. I keep getting "Cannot find module 'gsap/ScrollTrigger.min.js'" even after I followed all above steps. Could the issue be that I had originally used "npm install ./gsap-bonus.tgz" and then reverted to the above? I tried everything from left to right now 😑😅

@OSUblake Thanks so much, this worked like a charm. Really appreciate your help!

Hi @Cassie! What setting would you have to use to have the text on the line morph into the circle but kind of 90deg further along the circle so it sits on top of it. Thanks so much☺️

Thanks for your reply @OSUblake - I thought about that but they you could only move between those two states, right? Is there a way to create a random clip-path?

Hi there! I'm trying to create this kind of animation, a morphing mask over an image: https://www.nikki-kay.com/ It seems like this is a lottie animation. What way would you suggest, if I wanted to recreate this with GSAP? A morphing mask, or a clip path? Ideally I want to add more animation layers around it, so not sure if a lottie animation would be best. Thanks so much for your help! Lisa

Thanks so much @PointC - it is working like a charm now... https://codepen.io/lisaschumann/pen/ZEXjRyJ

Hi @PointC, Thanks so much for your help. This is great! I added it in, but it seems I am missing something since the right leaf comes in from way to the right side. Am I missing something on the transformOrigin? https://codepen.io/lisaschumann/pen/ZEXjRyJ Absolutely love GSAP!

Hi there, I'm trying to have the leafs of the logo grow like in this gif, but I am struggling to make it scale from the origin point and draw it. Thanks for your help! Image from iOS.MP4

Hi everyone! I've got 2 issues: 1. The second ScrollTrigger animation on my page (the purple section) has their markers off. Although it is set to start "top 0" it starts way below. 2. The second animation has lots of white space underneath it created by the pin spacer. Is there a way to hide that scroll space? Thanks so much!

That makes sense! Thanks for your help @akapowl - saved the day:)

Thanks so much @akapowl that works GREAT. When I enable smooth scrolling with it, it seems to be causing an issue though. Did that happen to you before too? I think I can disable smooth scrolling for now, but would be great to know how you deal with it:) https://codepen.io/lisaschumann/pen/qBjzVyj

@akapowl thanks so much that works great and now the animation stops once you've scrolled through once:) Loving the dogs! Once the animation goes to the onLeave function it jumps to the next section underneath though. Is there a way to avoid that jumping?

Hi there, I'm trying to have this ScrollTrigger animation run only once when the user scrolls down the first time. When they scroll back up, all elements are meant to be static without any animations anymore. Basically, I only want to have the animation on scroll work only once. When I use once: true however it adds all the white space above the section on scroll up. Can you help?:)

@nico fonseca thanks so so much for this! super helpful. Loving the waves too! And thank you @GreenSock for pointing me to the other thread.

Thanks so much Jack for such a detailed explanation. I feel like I'm understanding a bit more. I then thought it might be a solution to create all SVGs in one illustrator file and export that so that it would all be within the same viewbox, but that seems to have made it worth, and I feel as though I'm missing the understanding of how I would center items within the SVG in the middle. https://codepen.io/lisaschumann/pen/KKqMMoe Earlier I only got the light to fit near the middle by nudging it and then exporting it again in Illustrator. Also, my line is still jumping when it repeats rather than flowing like in this demo https://codepen.io/ekfuhrmann/pen/JjbYLgg I'm sorry for so many question, I really appreciate your help!