PointC

You have a viewBox on your SVG but no explicit size so it expands to the full size of any screen. The transform point for the scale is in the upper left of the ellipse so this appears to move a lot as it scales. I assume you wanted something more like this: https://codepen.io/PointC/pen/ExrJvjM/5cde8a90ca32abcf9b8e14c08fdaecbb Happy tweening.

You're close. In the stagger object it should be from: "end" rather than start: "end". https://codepen.io/PointC/pen/BaMvqBg/2851ce0d8b279d3efa7e08bf2c1220b7 Happy tweening.

For circles and arcs, I find it easier to clone the original circle path, show a section of it and simply rotate around its center. Super simple with the drawSVG plugin. https://codepen.io/PointC/pen/qBgKyKy/a33f6c2d7e7fa58d1c50e59a4f3ea24e You can also use the pathLength = "1" trick and achieve the same result without the plugin. https://codepen.io/PointC/pen/zYeaLap/f9214e6d849c0bec87e065008e4b855e Just my two cents, Happy tweening.

Yep - @mvaneijgen is exactly right. You have multiple masks but the artwork is still one piece. That will need to be broken into at least 4 pieces as you have 3 overlaps. Each piece then needs its own mask. As I mentioned at the end of my article - it can be a time consuming process to break all the artwork into pieces so you have to weigh that time against the client's goals. Of course if you're billing by the hour, take your time. 😜 Best of luck.

That's not working because you have the same trigger, start time and duration for all the characters. You'd simply need a stagger to make this work. https://codepen.io/PointC/pen/bGzaaWz/9a4e6975199dfb94f824ed859306297b Just FYI - I'd look hard at SplitText as it makes this much easier and you won't have such a verbose HTML section. https://gsap.com/docs/v3/Plugins/SplitText/ Happy tweening.

I'm not sure if I wrote about it, but I did post this simple puppet/morph demo . https://codepen.io/PointC/pen/gOgGQrP Yeah - I'm with @Cassie on this - the puppet warp may work, but breaking it apart would probably be the wisest direction. As with most animations, it's all about the asset prep. Rive has bones so character animation should be a little easier. Spine is another option. Best of luck.

Thanks. I thought I should punch the forum time clock once in a while or Jack will revoke my Mod badge. 😉

Depending on your artwork, it can sometimes be necessary to break it into pieces for the best result. I wrote about that here: https://www.motiontricks.com/svg-calligraphy-handwriting-animation/ Happy tweening.

If you want a total of 3 seconds for all elements, you'd take your duration (let's say 1 for this example) and subtract that from your desired total duration. That leaves you with 2 for your stagger amount. You'd then write: gsap.to(yourtargets, { duration: 1, yourProperty: xx, stagger: { amount: 2 } }); Using that method, you could change from 3 to 20 targets and the duration would still be 3 seconds as GSAP will calculate the stagger for each target based on your total amount. Happy staggering.

I'd recommend investing in a Club GreenSock membership so you have access to SplitText. Makes this animation fairly easy. Split into chars. Grab the innerText and place it into 2 identical divs in each char div Set parent char div overflow to hidden Move the clone yPercent -100 or 100 depending on odd/even in the array Animate the 2 child divs yPercent +=100 or -=100 again depending on odd/even in the array Set tween repeat to your liking Place the tweens on a parent timeline (optional) and animate the progress Each column is its own tween so you can randomize or offset the times a bit if you need a more organic feel. Always lots of options with GSAP. https://codepen.io/PointC/pen/ZEmOKvP Happy tweening.

Getting things to animate at the same time involves the position property. I see you're adding some labels but I'm not seeing multiple tweens using the same label unless I missed something in your code. If I'm panning and zooming around an SVG, I usually reach for the viewBox. I find it easier to art direct those types of animations with this technique. I have a tutorial here: https://www.motiontricks.com/basic-svg-viewbox-animation/ https://codepen.io/PointC/pen/abddXBR/bc5bb5c85338b629f3106a89585d02c9 A couple other older demos showing various ways to use the viewBox to animate. https://codepen.io/PointC/pen/OMabPa https://codepen.io/PointC/pen/wvpObWa https://codepen.io/PointC/pen/LmOvEQ Hopefully that points you in the right direction. Happy tweening.

Just modify your start/end percentages: https://codepen.io/PointC/pen/qBJzeYJ/892842f1056c3bd18093804305c0d32c Happy tweening.

Here's a quick demo with a loop through the targets and creating a simple timeline for each. Then we add the enter/leave listener to play/reverse the timeline on hover. https://codepen.io/PointC/pen/rNqbOxm Happy tweening.

In addition to @Rodrigo's sound advice, I'd add that you don't really need to worry about initial values with hover animations. You'd generally just create a tween or timeline and play/reverse on hover in/out. Thanks for being a Club member and welcome to the forum.

When you're clipping an H1 separate from the SVG, I'd recommend just using a container div for the H1 and setting overflow to hidden. Something like this: https://codepen.io/PointC/pen/EMOwaO Just a few other notes: You could save a lot of JS if you apply a common class or select an array of groups to apply your autoAlpha set(). Currently you have 20 identical set() tweens in a row. I'm not sure setting the autoAlpha:1 is necessary as that would be its default state. No need for <body> tags in the HTML panel of CodePen You can load scripts via the little gear icon on the JS panel rather than pasting the script tags in the HTML panel Happy tweening.

You'd really need to boil that down to a minimal demo and have a GSAP related question for us to answer. We just don't have the bandwidth to look through entire projects and 3rd party libraries. Just FYI - looks like you're loading a really old version of TweenMax (1.20.3) I'd strongly recommend using the latest GSAP version (3.11.5) If you have a specific GSAP related question, we're happy to help. Best of luck with your project.

Yep - the relative value on each iteration is the culprit here. There are a few ways to solve it, but I think the easiest is just to set the lines back to 0 after they fade out. Add this to the end of the timeline in the clearData() function and you'll be good to go. You also won't need relative y values on the tweens in that function with this change. Just y:20 will work perfectly. tl.set("#para-long-line, #para-short-line", { y: 0}); Happy tweening.

I'm not quite sure I follow. So the lines are supposed to only move on the first tween? Is that after the morph? If you can clarify the desired outcome a bit, I'll try to point you in the right direction. Thanks.

Since the morph already happened on the first tween of the timeline, it appears nothing is morphing for tweens 2 & 3. Easiest solution is to use a .fromto() tween rather than a .to() tween. https://codepen.io/PointC/pen/Jjmzdxp/6382a2db1d9550ba86e6e33f3f318b9a Happy tweening.

I'm not quite sure what you're trying to accomplish with the infinite repeats on some of the tweens, but this thread may offer some helpful info too.

Sounds like a good use case for clamp() https://codepen.io/PointC/pen/dygQaPj/da853be09052e3296cc321b566e75353

Looks like they have a waves section with two SVGs in it and then they animate the wave container div along the x axis. You can inspect the CSS to see how they've lined up the images. There are multiple ways to go about it. x translation, morphing, animate individual points of the wave. All can work. You would just use the same fill color for the waves as the next section of the page and it'll look like the waves are along the top of it. There are many wave animation threads around the forum. Here's one to get you started.

I'm not seeing anything move to the left. It all looks correct to me. Just my two cent approach, but for little arcs and circles, I like to use type:rotation for these types of interactions. Here are a few examples from a Motion Tricks tutorial that never got published. Maybe they will give you some ideas too. https://codepen.io/PointC/pen/dyggEJE https://codepen.io/PointC/pen/NWOOVYd https://codepen.io/PointC/pen/rNqqgvK Happy dragging.

There are a bunch of videos on YouTube to teach you how to use SVG masks. https://www.youtube.com/results?search_query=svg+masking

You're looking for collision detection. There are several threads about the topic around the forum. Here are a few to get you started.