[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  

[GSAP Stagger loop]

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.  

See the Pen 3834e411d95e66f428b711e972a2d87f by PointC (@PointC) on CodePen

[Split text animation on click]

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.

[animating multiple elements along an ellipse path simultaneously at different points (motionPath)]

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.  

 

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

 

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

[Nested Accordion]

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.

 

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