PointC

@Rodrigo getting all stylish with double color changes.

Hi @banhmi Welcome to the forum. The line drawing is super easy with DrawSVG and a properly prepared SVG file. The tapered strokes are a bit more difficult. You'll need to use masks and possibly multiple elements to pull that off. I have a tutorial that may give you some ideas. https://www.motiontricks.com/svg-calligraphy-handwriting-animation/ Happy tweening and welcome aboard.

Hi @michael_feh Welcome to the forum. We've had a few threads about that effect and you're correct - it's pretty easy with SplitText. Here are a couple demos I posted as answers for one of the older threads. They should point you in the right direction. https://codepen.io/PointC/pen/MWQJWqJ https://codepen.io/PointC/pen/NWybQow Happy tweening and welcome aboard.

Sorry - I'm not following, but you don't need to put the intro and the scrubbed progress timeline on the same parent. In your revised demo you have: .add(items(), '<'); which adds that at the start of the previous animation. Did you mean to have it start after the intro? More details would be helpful as I'm just not understanding the desired outcome.

I'd probably place the main timeline on a parent and tween the progress() or time() with my ScrollTrigger. Maybe something like this: https://codepen.io/PointC/pen/eYXWzNK/f0c829a8060479b0a65459094ce4c5dc Happy tweening.

This thread can probably help.

This animation is so much easier when its all in the same SVG using a path that has been cut to the proper starting point as the motionPath. That way you only need a tween for each target along the path and a yoyo tween set to half the duration of the motion for the scale. Something like this: https://codepen.io/PointC/pen/YzgZexM

Sounds like a good use case for the pluckRandomFrom helper function. https://gsap.com/docs/v3/HelperFunctions/helpers/pluckRandomFrom

I've only been around here for about a decade and I didn't know that. 🤷‍♂️

The play once problem is because the timelines have already played. You can solve that with: element.addEventListener("mouseover", () => tl1.play(0)); element.addEventListener("mouseleave", () => tl2.play(0)); Many times, you can hover an item and simply reverse the timeline when you mouseleave. Like this. https://codepen.io/PointC/pen/rNqbOxm You can also just use tweens and target the entire array except for the one you hover. Something like this: https://codepen.io/PointC/pen/YzgpJJq Hopefully that helps. Anything React specific will have to wait for someone else as I have no React knowledge.

I like the solution above provided by @mvaneijgen. 👍 Another approach would be to put each target on its own timeline and those timelines are added to the parent. I've also moved some of the CSS settings to GSAP in the JS so you can change the width/height of the targets with one variable and also set the number of targets that visibly move across the stage. This also sets the start of the timeline to the proper point where the stage is filled at the beginning. Again, the above solution is great, I'm just throwing out other ideas. Happy tweening. https://codepen.io/PointC/pen/KKENxwp

I'm not sure if there's a way to do that or not. One of the admins would have to give a definite answer on that question. We do have the 'favorites' button up on the top right so you can bookmark your favorite threads.

https://codepen.io/PointC/pen/xxBOjye/e4fd92282bd481d5f27e3ed96f1bb48c

Images inside an SVG need to be written a little differently. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image I've also switched this to a timeline with the ScrollTrigger attached to the timeline itself. https://codepen.io/PointC/pen/YzgWarj/652dec827d2ee326aee800655ad68620 Happy tweening.

The easiest solution would be to place all the elements within the SVG itself. That way it all resizes together. Happy tweening.

Cool effect. Just FYI - clicking the arrows quickly results in some of the base numbers jumping to a strange position. Here's a quick GIF showing the base for #2 flying off to the right by your panel indicator.

You can use an onComplete call after the timeline finishes and set the body visibility like this: https://codepen.io/PointC/pen/qBvbqjX/ddd4e5c04476f3e845baf11ea6a52829

If you want to use two separate tweens each with a ScrollTrigger, you can add immediateRender:false on the second one. https://codepen.io/PointC/pen/qBvbaJZ/0a38dd989e8bc89274ad12a63919ea1c

A couple things - Your demo was missing the ScrollTrigger plugin. You're triggering all animations with the same class at the same time. You can loop through and create a trigger for each image like this https://codepen.io/PointC/pen/eYXmNge/06cc4d1f848523ff0a28fb6151664226 The problem with that is all the pictures in the same row animate at the same time. That may be what you want, but quite often you want to stagger the targets in each row. That's the perfect use case for batch. https://codepen.io/PointC/pen/vYPEOKM/34fbf1d6bf627411758c1cac157f0d20 More info about batch. https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.batch()/ Hopefully that helps. Happy tweening.

That curve distributes the start times of the staggers. Where it's flat, more targets start at the same time. Professor @Carl has an excellent video about it here: Happy tweening.

Did something similar here: https://codepen.io/PointC/pen/zYRyveM Maybe it'll spark some ideas for you. Happy tweening.

I'm not sure I quite understand the desired outcome but here are a couple pens that may give you some ideas. (For the record I'd probably use SVG, but that's just me.) https://codepen.io/PointC/pen/ZErvbPR https://codepen.io/PointC/pen/VwrGqrV Happy tweening.

@GreenSock Very fancy.

You're welcome. I just noticed that was your first post too - so welcome to the forum.

Looks like you just forgot to load the MotionPath plugin. https://codepen.io/PointC/pen/XWOLbmL?editors=1010 Happy tweening..