PointC

No worries. @Cassie is the genius. I just pretend to know what I'm doing.

GSAP wasn't the only thing I've learned from you over the years.

I don't have time to dive too deep into that SVG, but I see translates and scales on nearly everything. One group even has two translates on it. 🤷‍♂️ In my experience, you'll see no surprises if you use that background rectangle for exports and avoid all those additional transforms and scales. Best of luck and happy tweening.

If I understand your desired outcome correctly, I'd add a 2nd tween to the timeline which is half the duration of the position tween. That 2nd tween would animate from opacity:0 to opacity:1 Set yoyo:true and repeat:1. Make sure both tweens start at the same time with the position parameter and set the ease to your liking. Hopefully that helps. Happy tweening.

That letter a is way off position and super tiny. Here's your SVG file without any morphs and just pulled into AI. You can see it's not where you'd expect. Buttery smooth morphs with no surprises always starts with asset prep. One of the most important things I can recommend is using a background rectangle for all your vector exports. That will result in no weird transforms on paths and groups. I have a quick-tip tutorial about that here. https://www.motiontricks.com/use-background-rectangle-with-svg-exports/ Happy tweening.

Anything is possible. Some fonts will require much more work and several masks to complete the effect. Whether that's worth all the extra time... 🤷‍♂️ I have a tutorial here: https://www.motiontricks.com/svg-calligraphy-handwriting-animation/ https://codepen.io/PointC/pen/zYrXjBJ/ba382ee79baa22bfd47028edd4e9247e Hopefully that helps. Happy tweening.

I've heard of him. He seems cool. 🕶️

I'm pretty late to the party, but there is also this old thread which covers the basics. With your filled paths in the name, you'll need multiple masks to make it work properly. We go over that technique in the thread. Happy tweening.

Probably easier to loop through and give each one its own timeline. https://codepen.io/PointC/pen/BaPyQdg I also used the GSAP utils.toArray method to select the <rect> targets. That way you don't need to manually create an array or give each one its own ID. You can add as many rectangles as you want and it'll still work as the delay is based on the length of the array. I added a few just for fun. Happy tweening.

I'd put that on one timeline and use the latest version of GSAP and the MotionPath plugin so you can use alignOrigin. https://codepen.io/PointC/pen/oNMgzxx I wasn't' sure if it was supposed to scale down again before the loop, but I added it. Happy tweening.

I'd drop the text into a span, make a couple clones with clip-paths and stagger the clones while the original (non-clipped) moves out of view. Maybe something like this. https://codepen.io/PointC/pen/bGKqKGo Happy tweening.

You'll need to up your filter width/height. I used 150% but you can set it to your liking. https://codepen.io/PointC/pen/OJEpzpM/6ac6bf4810ef1c0892f473088e6c6a46 But as @Rodrigo mentioned, I'd recommend restraint with that kind of animation when it's so large. Happy tweening.

1. attr:{} is the attribute plugin. I'm more in the habit of specifically targeting attributes that way, but in this case, yes - simply using stroke without that wrapper will work just fine. Sometimes a property and an attribute may seem the same but they aren't. A rectangle for example has an x attribute. These 2 lines may appear the same but they are not. One will translate x:100 while the other targets the x attribute. .to("rect", {x:100}) .to("rect", {attr:{x:100}}) If you specifically want to target an attribute, use the attr:{} wrapper. 2. You'll generally switch hyphenated properties to camelCase. So stroke-width becomes strokeWidth. If that's not to your liking you can also use the hyphenated version, but you'll need to use quotes. These two lines are effectively the same. .to("rect", { "stroke-width": 40 }) .to("rect", { strokeWidth: 40 }); 3. You can use GSAP to set a gradient fill with no problem. That will work with or without the attr:{} wrapper. // add a fill this way gsap.set("rect", {attr:{fill:"url(#someGradient)"}}) // inspect the element and you'll find this fill="url(#someGradient)" // add a fill this way gsap.set("rect", {fill:"url(#someGradient)"}) // inspect the element and you'll find this style="fill: url("#someGradient");" 4. I don't know that you could smoothly interpolate between a linear and radial gradient. A crossfade would probably be a better way to go. You can dynamically add stops with JS by creating the element and adding offset/color attributes, but since the gradient isn't rendered, I don't think it would refresh the changes. If you want to go from a couple stops to multiple stops, I'd probably add all the stops at the beginning and just set the color and offset the same on some of them so it will appear to only have two. You can then loop though and target any or all of the stops offsets/colors . I'd also add that animating gradients is pretty intensive so my recommendation would be to use it sparingly. Good luck.

You can target any or all of the stops in your gradient. Here's a fork of my demo you posted above. Instead of a tweening the gradient to a solid fill, I've now tweened it to a new gradient. Happy tweening. https://codepen.io/PointC/pen/RwJWwQQ

You'll want a stroked path for that with a separate arrowhead element. The tricky bit with masks and motionPaths is that Firefox doesn't like them. To get around that you'll most likely need a proxy element that follows the path and set the position of the masked path to the proxy when the animation updates. Here's a quick example. https://codepen.io/PointC/pen/rNKaXEq Some additional reading. https://www.motiontricks.com/svg-calligraphy-handwriting-animation/ https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/ https://www.motiontricks.com/svg-masks-and-clippaths/ https://www.motiontricks.com/svg-dashed-line-animation/ Happy tweening.

I'm not really sure what the problem is there, but I just wanted to point out that most of the time, using CSS variables is a much easier way to handle pseudo elements. No CSSRule plugin required. Here's a basic wired-up example. https://codepen.io/PointC/pen/rNpXXWq Hopefully that helps. Happy tweening.

Yes, it's a member plugin. https://greensock.com/club/ Happy tweening.

Use DrawSVG. https://codepen.io/PointC/pen/ExQJPRd/8d978de955d47404422a3c3037dab2ed

I would think a simple stagger from a "random" start point would work just fine. Unless I'm missing something. https://codepen.io/PointC/pen/OJQGyZq/7ba0001b0a0436bece4757570b8b52ca Happy tweening.

What are you trying to randomize? Duration, delay, repeatDelay, level of opacity, repeat count? I'm just not sure what the desired outcome is here. Any more info would be helpful. Thanks.

Hi @Lollibomber Welcome to the forum and thanks for being a Club member. 🎉 I don't think that will work. @GreenSock will correct me if I'm wrong but I believe the Flip plugin is only for CSS properties. You can certainly set that attribute with GSAP and the Attr plugin. MDN docs does list preserveAspectRatio as animatable, but in my experiments, using the SVG built-in <animate> element produces a result that is no different than setting it with GSAP. You can animate the viewBox with GSAP if you like. Happy tweening and welcome aboard.

Of course: Observer 🤦‍♂️ I still don't have the muscle (or brain) memory to reach for that one. Just my two cent opinion from a user perspective but that lucid site always feels odd to me. Like my mouse wheel is slipping or something. You get used to your wheel taking you a certain distance down the page and now you have to spin it twice as much. Again just my 2 cents though. Happy tweening.

I guess you could do something like this: document.addEventListener("wheel", function (e) { e.preventDefault(); gsap.to(window, { scrollTo: "+=" + e.deltaY / 2 }); }); Though I'm not sure how well that would work with ScrollSmoother as it has the fixed wrapper and scrolls the inner content.

Looks good. Use your new powers responsibly. Happy tweening.

Welcome to the forum I'm not really sure what's going on with all your JS, but here's a simplified fork of your pen with a blur filter scrubbed with ScrollTrigger. https://codepen.io/PointC/pen/QWQoxZz/3e7e8e609e92cf29af7b0ea4841049a5 Simplified demos are greatly appreciated with questions. Happy tweening.