[Is there a better way to fade in text blocks based on the timeline progress?]

I'd go even simpler with yoyo tweens and repeatDelay. Something like this.

 

See the Pen 63a3e8ecfaf75286961b6e2ec36abed7 by PointC (@PointC) on CodePen

 

Just my 2 cents. YMMV. Happy tweening.

 

 

Just FYI - the original pen that I forked had tweens with a 0.1 → 1 second duration on a timeline that was 100 seconds long. With scrub set to true they were animating super fast because they were only a tiny fraction of the duration. .1% - 1%.

[Motionpath responsiveness issue]

I think you'd just need to clearProps when you resize and kill the tween.

 

See the Pen 03ab931389596f7fd6e582a8f9c6c1ec by PointC (@PointC) on CodePen

 

But I agree with @Trapti, there are easier ways to do this with an SVG.

 

Happy tweening.

[Attempt at recreating an interesting text reveal]

Feels like the origin is much higher on the targets in that example. I also don't think there is any z rotation. Just a trick of the perspective. Here's a quick fork of your demo. I also switched to SplitText instead of SplitType. This is a GSAP forum after all. 😉

 

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

 

Hopefully that helps. Happy tweening.

 

[staggered scrolltrigger - hidden child causes delay]

I'd also recommend using a unique class as @Rodrigo suggested. You can, however, make it work with the original HTML by using a child combinator to choose only the direct descendants of the header-icons class.

gsap.to('.header-icons > div', {

Happy tweening.

[ScrollTrigger : Simple fadeIn/fadeOut onEnter/onLeave with scrub]

Welcome to the forum.

 

I'd probably use a yoyo and repeat:1 for the opacity in/out. Also making sure the ease is set to none as this is a scrub:true situation.

 

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

 

Hopefully that helps. Happy tweening and welcome aboard.

 

[Play button on the mousemove EventListener]

We have several mouse follow effect threads. Here are a couple that should point you in the right direction.

 

Happy tweening.

[divide screen size on 100 circle with different radius]

We need to keep this forum focused on GSAP questions.

 

This also seems like the same question you asked here:

I'd follow the advice in that thread and use the video @Rodrigo posted as a guide. If you have any GSAP related questions, we're happy to help. Best of luck on your project.

[malformed path if specified by ID, but same path works if specified raw]

Nothing jumps out immediately at me as to why that would be a problem. But it's hard to say without a minimal demo. If you can provide that, someone can most likely point you in the right direction.

 

Happy tweening.

[Scrolltrigger drawSVG maintain path length as it progresses]

You'll want to put all the tweens on a timeline and move the scrollTrigger to the timeline rather than the single tween.

 

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

 

Hopefully that helps. Happy tweening.

[Scrolltrigger drawSVG maintain path length as it progresses]

Welcome to the forum.  

 

If I understand you correctly, I think you'd want to tween the drawSVG path from 0% 10% → 90% 100%. That way you're always showing 10%. You could also add a tween at the beginning or end to make it appear/disappear too. Happy tweening and welcome aboard.

 

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

[DrawSVG path length calculation when preserveAspectRatio:none]

Using  preserveAspectRatio="none" and a vector effect of non-scaling-stroke is problematic. This was discussed in this thread:

 

I would probably come to the same conclusion as that thread and generate the curved line dynamically.

 

Happy tweening.

 

[Is it possible to have the svg path change colours as the object moves along it (using ScrollTrigger)?]

You can set the stroke-dasharray and animate the stroke-dashoffset with CSS, but I'd recommend using drawSVG as it solves a lot of browser inconsistencies. 

 

Happy tweening.

[Is it possible to have the svg path change colours as the object moves along it (using ScrollTrigger)?]

Welcome to the forum.

 

If you're talking about the whole path changing as you scroll, you'd move the trigger to the timeline and add a second tween to animate the stroke color as the ball animates.

 

See the Pen 48ff3b51feeaaec506ed6260b59efa17 by PointC (@PointC) on CodePen

 

If you meant the path would change to green only as far as the ball has traveled, you'd need a second green path that is drawn as you scroll.

 

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

 

Happy tweening.

[Animating a SVG Mind Map (Nested Timelines?)]

If you want to overlap each little group of elements, I'd go with a child timeline for each group and add those to a parent. The parent then plays/reverses on click. Something like this.

 

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

 

The overlap is on line 47. Each child timeline is 0.45 seconds in duration so I overlapped by 0.2 seconds (approximately half way), but set everything to your liking. The nice thing with a parent timeline is you can set a timeScale too if everything is too fast or slow for your needs.

 

Happy tweening.

[Is it possible to use MotionPath to start at the end of a path and go backward?]

sure - just use the start/end properties

  motionPath: {
    align: sparklePath,
    path: sparklePath,
    alignOrigin: [0.5, -0.5],
    start: 1,
    end: 0
  },

Happy tweening.  

[Fluid/curved section divider]

Looks like they just use a curved path in the SVG and scale the y from 0 → 1 on scroll. This should get you started.

 

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

 

Happy tweening.

[MorphSVG changes values]

hmmm... the only other ones that come to mind off the top of my head are these:

 

 

[MorphSVG changes values]

10 hours ago, mvaneijgen said:

I know there is a great post some where on the forum talking about how to "animate individual SVG points",  "SVG nodes", "path points" , but I can find it right now. 

Is this the one you meant?

 

[Demo lagSmoothing]

Yeah - I'd be curious about what you're building as well. Maybe a demo?

 

You can find more info about lagSmoothing under the gsap.Ticker() property.

 

https://gsap.com/docs/v3/GSAP/gsap.ticker()#gsaptickerlagsmoothing

 

Happy tweening.

[Make a text disappear on top and reappear from bottom]

Looks like you'd need immediateRender:false on that second tween. 

 

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

 

Happy tweening.

 

[Mystery XY Offset gsap.set()]

On 2/22/2024 at 9:07 AM, Cassie said:

personally illustrator's my fave but that's down to years of muscle memory.

+1

except I now have to say Illustrator instead of AI otherwise everyone gets confused.  😜

[Docs: Mousewheel to zoom into map]

Here's an oldie but a goodie from our own @OSUblake. Should give you some ideas.

 

See the Pen oGoyYb by osublake (@osublake) on CodePen

[Creating a pre-loader with GSAP3 Stroke Reveal effect]

A couple tutorials which may help.

https://www.motiontricks.com/animated-handwriting-effect-part-1/

https://www.motiontricks.com/animated-handwriting-effect-part-2/

 

Other helpful info.

https://www.motiontricks.com/cut-your-path-start-points-in-adobe-illustrator/

https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/

https://www.motiontricks.com/svg-calligraphy-handwriting-animation/

 

Happy tweening.

[GSAP Stagger loop]

Just FYI - your position parameters were correct in the initial demo. The overlap I saw was that font size rather than a weird overlap tween. The position parameter adjustment fix I posted would still work though.  My mistake - sorry about that. Weekend brain.

 

It should still be much easier in a loop and using yPercent. Happy tweening.  

[GSAP Stagger loop]

Yeah - it's just hard to keep track since the start of one is based on the prior one, but that one is based on the end of the prior one etc... Kinda gets weird and hard to follow with different length words and tweens.

 

I think it might be easier to set this up in a loop and use yPercent to move the targets.  This could still present a few challenges though. Here's a fork of your demo with yPercent.

 

See the Pen 3edf621a86455b30dd00b80ed2d18174 by PointC (@PointC) on CodePen

 

It woks really well until the 'moment' characters start overlapping the 'time' characters. It's not a miscalculation as you can see that the 't' in time moves in unison with the 'm' in moment. The problem is the width of the m is wider than the first two letters in 'time' so it looks odd. A solution to that is adding a slight delay for the new word to move in like this.

 

See the Pen 81a43bf9e46371fbd730053644797add by PointC (@PointC) on CodePen

 

I think that works pretty well and the delay is a variable so you can adjust it to your liking.

 

To further illustrate what we're seeing with the Poppins font, I've switched the first demo to use a mono spaced font with no delay. You can see that everything works perfectly since all letters are the same width.

 

See the Pen 7ffb8c2abadabf74ee8e01ca0f2a3904 by PointC (@PointC) on CodePen

 

Since it's all created in a loop now, it's more flexible so you can add as many words as you want and it will all work correctly. You'll still need to manually add a duplicate of the first word to the bottom of the stack in the HTML with these demos, but you could also add some code to clone it if you prefer.

 

Hopefully this helps. Happy tweening