[How to continue animation from previous timeline animation?]

If you want to use two separate tweens each with a ScrollTrigger, you can add immediateRender:false on the second one.

 

See the Pen 0a38dd989e8bc89274ad12a63919ea1c by PointC (@PointC) on CodePen

[Add 'image reveal' effect on scroll]

A couple things -  

1. Your demo was missing the ScrollTrigger plugin.
2. 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

See the Pen 06cc4d1f848523ff0a28fb6151664226 by PointC (@PointC) on CodePen

 

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.

See the Pen 34fbf1d6bf627411758c1cac157f0d20 by PointC (@PointC) on CodePen

 

More info about batch.

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.batch()/

 

Hopefully that helps. Happy tweening.

 

[Ease the whole stagger animation]

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.

 

[Pinning an image for the duration of a dynamically sized list in GSAP]

Did something similar here:

See the Pen zYRyveM by PointC (@PointC) on CodePen

 

Maybe it'll spark some ideas for you. Happy tweening.

[Animate Outlined Text background to fully filled]

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.)

 

See the Pen ZErvbPR by PointC (@PointC) on CodePen

 

See the Pen VwrGqrV by PointC (@PointC) on CodePen

 

Happy tweening.

[GSAP Counter with Commas]

@GreenSock

Very fancy.

[Image not appearing when trying to use Motion Path]

You're welcome.

 

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

[Image not appearing when trying to use Motion Path]

Looks like you just forgot to load the MotionPath plugin.

 

See the Pen XWOLbmL?editors=1010 by PointC (@PointC) on CodePen

 

Happy tweening..

[Maintaining CSS blend mode / stacking context on text element during GSAP Tween]

Maybe get the width of the parent and move each target accordingly. 

 

See the Pen 8185fc373a73bca244860ae0db35d225 by PointC (@PointC) on CodePen

[Maintaining CSS blend mode / stacking context on text element during GSAP Tween]

Animate the .title-link class instead of the .marque parent and you should be good to go.

 

See the Pen 87842a7efa22c7a9384c9ec16e3d02db by PointC (@PointC) on CodePen

 

Happy tweening.

[Ellipse problem]

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:

 

See the Pen 5cde8a90ca32abcf9b8e14c08fdaecbb by PointC (@PointC) on CodePen

 

Happy tweening.

[how start from last child]

You're close. In the stagger object it should be from: "end" rather than start: "end".

 

See the Pen 2851ce0d8b279d3efa7e08bf2c1220b7 by PointC (@PointC) on CodePen

 

Happy tweening.

[How to animate arc along svg circle path smoothly?]

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.

 

See the Pen a33f6c2d7e7fa58d1c50e59a4f3ea24e by PointC (@PointC) on CodePen

 

You can also use the pathLength = "1" trick and achieve the same result without the plugin.

See the Pen f9214e6d849c0bec87e065008e4b855e by PointC (@PointC) on CodePen

 

Just my two cents, Happy tweening.

[DrawSVG on path with varying width]

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.

[Update color text (by chars) with scrolltrigger]

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.

See the Pen 9a4e6975199dfb94f824ed859306297b by PointC (@PointC) on CodePen

 

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.

 

[Tool to create a moving svg so I can code it?]

52 minutes ago, Cassie said:

@PointC wrote an article on that I seem to remember?...

I'm not sure if I wrote about it, but I did post this simple puppet/morph demo .

See the Pen gOgGQrP by PointC (@PointC) on CodePen

 

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.

[DrawSVG on path with varying width]

14 minutes ago, Cassie said:

Good to see you Craig. 💚

Thanks.

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

[DrawSVG on path with varying width]

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.

 

[Stagger and total duration]

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.

 

[HELP! Rolling Text Animation]

I'd recommend investing in a Club GreenSock membership so you have access to SplitText. Makes this animation fairly easy.

 

1. Split into chars.
2. Grab the innerText and place it into 2 identical divs in each char div
3. Set parent char div overflow to hidden
4. Move the clone yPercent -100 or 100 depending on odd/even in the array
5. Animate the 2 child divs yPercent +=100 or -=100 again depending on odd/even in the array
6. Set tween repeat to your liking
7. 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. 

 

See the Pen ZEmOKvP by PointC (@PointC) on CodePen

 

Happy tweening.

 

[Cannot Animate `x` (Pan) and `scale` (Zoom) on SVG Concurrently]

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/

 

See the Pen bc5bb5c85338b629f3106a89585d02c9 by PointC (@PointC) on CodePen

 

A couple other older demos showing various ways to use the viewBox to animate.

See the Pen OMabPa by PointC (@PointC) on CodePen

 

See the Pen wvpObWa by PointC (@PointC) on CodePen

 

See the Pen LmOvEQ by PointC (@PointC) on CodePen

 

Hopefully that points you in the right direction. Happy tweening.

[Draw in button border clockwise from top center]

Just modify your start/end percentages:

See the Pen 892842f1056c3bd18093804305c0d32c by PointC (@PointC) on CodePen

Happy tweening.

[How do I capture the initial value of an item?]

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.

 

See the Pen rNqbOxm by PointC (@PointC) on CodePen

 

Happy tweening.

 

[How do I capture the initial value of an item?]

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.

 

[Clipping mask problem in animation]

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:

See the Pen EMOwaO by PointC (@PointC) on CodePen

 

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.