PointC

Yeah - with a longer stagger, you're gonna get a weird overlap like that because your words aren't the same length. The shorter word "time" is waiting to start rolling out until the prior one has animated in, but the one after "time" is again 7 characters and it starts animating in at the beginning of the rollout and this is causing problems. A quick and dirty fix is just to make a little adjustment: .to(chars4, {y: -80}, "<+=0.4") The position change is just double the stagger since we have two fewer letters in the chars3 targets. This is just a band aid though and not flexible at all since you need to make some manual calculations. I'd probably create a loop and calculate the duration() of each tween/timeline and set the position parameter accordingly. Best of luck and happy tweening. https://codepen.io/PointC/pen/XWGzLep/3834e411d95e66f428b711e972a2d87f

You're using .from() tweens. When you interrupt one and then start a new .from() tween animating the same property, you probably won't get the desired results. Say you have a div sitting at x:0 and you tween from x:100, but you start a new tween before that one is finished. Now the new tween will still start from x:100, but will finish at wherever you interrupted the last tween as that is the new final position. Say it was at the half way point, the new tween would now go from 100 → 50 rather than 100 → 0. That's why your splitText letters start to look weird with multiple plays. The easiest solution is as @mvaneijgen suggested - make a tween/timeline and play()/reverse() on click . Happy tweening.

Another option when adding multiple targets to a motionPath: You can stagger the start times and advance the tweens to the full duration or add individual tween to a master timeline. This would be in lieu of using the start/end values. in the motionPath object. Just my two cents to keep your code DRY. Happy tweening. https://codepen.io/PointC/pen/ExVzqdm https://codepen.io/PointC/pen/pojmBKJ

Just FYI - the demo of mine you posted can open the first panel automatically by adding this to the end of the code. toggleMenu(menus[0]); Though I'd probably just use the code @Rodrigo posted. https://codepen.io/PointC/pen/wvOreNG/e5bd6227d11542f55fec6013c8272a4c

I'll drop off my Mod badge at HR and clean out my locker.

I always hate to say you really don't need GSAP for that, but you really don't need GSAP for this effect. It's quite simple so just a tiny bit of CSS is all it takes to make it work. Just my two cents. Happy tweening. https://codepen.io/PointC/pen/ZEPJRKG

Instead of scaling the SVG, another option is animating the viewBox. I have a tutorial about that here: https://www.motiontricks.com/basic-svg-viewbox-animation/ Just a thought. Happy tweening.

Just another little FYI - if you don't want to reverse() the array for some reason with this type of animation, you can use a negative stagger value. Happy tweening. https://codepen.io/PointC/pen/rNRwMWX/86b831b335e0f82913a126d5f358a93c

@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