PointC

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.

 

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.

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.

sure - just use the start/end properties
  motionPath: {     align: sparklePath,     path: sparklePath,     alignOrigin: [0.5, -0.5],     start: 1,     end: 0   }, Happy tweening.  

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.
 

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

See the Pen NWybQow by PointC (@PointC) on CodePen
 
Happy tweening and welcome aboard.
  

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.
 
See the Pen KKENxwp by PointC (@PointC) on CodePen

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.

See the Pen rNqbOxm by PointC (@PointC) on CodePen
 
You can also just use tweens and target the entire array except for the one you hover. Something like this:

See the Pen YzgpJJq by PointC (@PointC) on CodePen
 
Hopefully that helps. Anything  React specific will have to wait for someone else as I have no React knowledge.
 

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. 

See the Pen 652dec827d2ee326aee800655ad68620 by PointC (@PointC) on CodePen
 
Happy tweening.
 

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

Looks like you just forgot to load the MotionPath plugin.
 

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

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.

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.

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.

 

Just modify your start/end percentages:

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

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.
 

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.

 

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.

 

From your description, it sounds like you need to wrap that scrolling block of text in a parent container and pin everything while it scrolls. Here's a fork of your pen.
 

See the Pen qBJKzLo by PointC (@PointC) on CodePen
 
Hopefully that helps. Happy tweening.

1. Yes - that's usually accomplished with overflow:hidden.
2. Yes - but remember zIndex only applies to positioned elements.

You could check if the target is is tweening and ignore the clicks.
https://greensock.com/docs/v3/GSAP/gsap.isTweening()
 
Or give the tween a reference, say 'spin', and then force the progress to 1 if the user clicks too quickly and spin is still active. So the code would be something like this.
if (spin && spin.isActive()) {   spin.progress(1); } https://greensock.com/docs/v3/GSAP/Tween/isActive()
 
Hopefully that helps. Happy tweening and thanks for being a club member.

y transforms with the element you're using as the trigger can be a little confusing. Especially with two ScrollTriggers on the same element. IMHO it would probably be easiest to use a parent element around your .events and use that as the trigger. That way you're not animating the actual trigger element. Something like this should work.
 

See the Pen VwEGVLK by PointC (@PointC) on CodePen
 
Hopefully that helps. Happy tweening.
 

Just a bit of FOUC. This should help.
Happy tweening and thanks for being a club member.

snap: { textContent: 1 }
See the Pen 10c8677689d49df47fe1e690eca483cb by PointC (@PointC) on CodePen
 
Happy tweening and thanks for being a club member.

You'd need to loop through each line and select the bottom/top .char in those lines and start all tweens at 0. Something like this.

See the Pen b300c7bf37ea7a9567e1733d87bbbe30 by PointC (@PointC) on CodePen
 
Just FYI - you had an ease on the timeline itself, but timelines don't have eases. I moved that power4.inOut ease to the defaults for the timeline so it would be applied to each tween.
 
Hopefully that helps. Happy tweening and thanks for being a club member.

 
 

I don't follow what you're asking. Are you talking about a parallax effect. If so, you want the child larger than the container and set the speed to auto. From the docs:
"auto" speed
When you set the speed to "auto", it will calculate how far it can move inside its parent container in the direction of the largest gap (up or down). So it's perfect for parallax effects - just make the child larger than its parent, align it where you want it (typically its top edge at the top of the container, or the bottom edge at the bottom of the container) and let ScrollSmoother do its magic. Obviously set overflow: hidden on the parent so it clips the child.
 
If that's not what you meant, could you please provide a minimal demo? Thanks and happy tweening.