PointC

Ha. One second too slow @Cassie.  🤣

Hi @Justin N 

Welcome to the forum and thanks for being a Club member. 🎉

For these types of animations I almost always create a clone and set the yPercent/xPercent to +/-100. Depends on what you're doing. Then tween both to an x/y percent of +=/-= 100 (again, depends on which way you want it to go). Add infinite repeat and you're good to go. Here's an old seamless cloud demo which shows the technique. Happy tweening and welcome aboard.  

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

If I understand the question correctly, I think you'd want to loop though your targets and add each to the timeline. This avoids manually adding a bunch of tweens like you have now. That way you can add as many divs as you like and it'll all still work perfectly. 

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

Hopefully that helps. Happy tweening.

It might not be exactly what you need but I just dropped a new demo using clip-paths to transition fixed position images on scroll. Happy tweening.

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

Okay, a few things.

• If you want to use ScrollTrigger on the whole timeline, you need to move it off the single tween and into the timeline vars.
• Your end value should be "+=800" rather then "end+800"
• When scrubbing, the durations don't really matter as they represent a percentage of the scrub distance rather than an actual duration 

Here's a fork of your pen with some changes.

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

I've moved ST to the timeline vars. The first tween has a duration of 1 second and it draws the path. The next two tweens start at the same time via the position parameter label. The first fades the text in over 2 seconds and the next animates the letters via the startOffset attribute with a duration of 8 seconds. The next is another opacity tween that fades out the letters and that starts 2 seconds before the end of the letter loop. Finally, we have a 1 second tween that draws off the path. 

So, we have a 10 second timeline and that breaks down to percentages of the scroll distance like this:

0% → 10% Path draws in.

10% → 30% letters fade in and that starts at the same time as the 10% → 90% letter loop.

70% → 90% the letters fade out.

90% → 100% the path erases itself.

A couple final notes:

• I'm not sure what you're trying to do with the onEnter and reversing the same timeline being controlled by ScrollTrigger.
• Using letter and word spacing in the CSS will require some manual adjustments to the startOffset end value needed to make the letters fully exit. I used -200%.
• If you want to change the opacity of individual letters as they animate, that would require separating them. Probably best to use MotionPath and convert the text to paths if that's the desired result.

Hopefully that helps. Happy tweening.

Sorry, still missing it. What path in your demo should be drawn first? 

If you want the text to enter one side of the path and exit the opposite direction, you can tween fromTo 100%/-100% for the startOffset. Something like this:

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

8 minutes ago, Dennyno said:

And how to draw the first path before the animation starts? Does it work as any other timelines and gsap animations?

I'm not sure I understand this part. Do you mean the path that the text follows?

I'm having a hard time following the question and the demo seems to have quite a bit of code to look through. The simpler a demo, the better. If you just want an "X" shaped clip to reveal an image and it should never be more than 700px wide, I'd wire it up like this.

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

Happy tweening.

It just occurred to me that you may have wanted the echoes to all come to a stop before it repeats. If that's the case, using amount for the stagger and an equal value for the repeatDelay would work well. Happy tweening.

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

Yep - it's pretty cool. It kinda gets overlooked these days with all the hoopla over ScrollTrigger and ScrollSmoother. You're a Club member (thanks 🎉) so you have access to all the goodies.

Have fun.

That's because of your onComplete. You're adding tweens to the end of the timeline on each repeat so the timeline is getting longer and longer. I assume you just wanted something like this.

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

Hopefully that helps. Happy tweening.

FWIW - I'd probably try a custom random wiggle. I used that on my TP pen. Pay no attention to the Pixi related code. The wiggle stuff is all in the wiggle() function.

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

I also used something similar for all the little floaty shapes on the header of Motion Tricks.

https://www.motiontricks.com/

Happy tweening.

3 hours ago, coco said:

I am actually still learning javascript

We all are. Nobody knows it all. 

FTR - I'd set this up in a single SVG and do something like this.

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

You can use a little Math to figure up the necessary radius of the SVG circle to fill the window. The only downside to this approach is that group 3 is actually above group 1 in the stacking order because SVGs don't have z-index. I think it's acceptable though as group 3 is almost faded out before group 1 restarts. At any rate, it should give you some ideas how to loop through the targets and create timelines.

Happy tweening.

It's been a minute since Jack has "whipped up" a new helper function. Time to dust off this old meme. 

Hi @Rob Fleming 

Welcome to the forum and thanks for being a Club member. 🎉

What you'll need to do is listen for an onComplete event for the slide position. Here's a stripped down version of my slider with just a wheel listener.

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

I've put the spans into a target array and when the slide animation finishes, it rotates the one that corresponds to the activeSlide variable. This is just a simplified example. You could have unique timelines and elements for each slide too. If that's what you need, I'd create the individual timelines and put them into an array. Then you can play the appropriate one when each slide comes into position. 

Hopefully that helps. Happy tweening and welcome aboard.

4 minutes ago, coco said:

Yes, you are right. I could definitely have created a function where I don't repeat these exact timelines 3 times.

That's actually how you'll solve your seamless loop problem. You'll create a separate timeline for each target and a repeatDelay that allows the first timeline to start repeating before the third one completes. 

@Cassie are you seeing the big SVG circles around each shield shape in Chrome on Mac? I can't get them to show up in Chrome or Edge on PC.

Performance issues with graphics are almost never GSAP related. Those are some pretty big images to be scaling and rotating. Maybe use them as a background for the div rather than an image. 

Just FYI - I don't even see the big circle images with text in Chrome or Edge. I only see them in Firefox so I'm not sure what's happening there. I think you'd also benefit from looping through the targets rather than manually creating three identical timelines. You could also use autoAlpha instead of display:block and alpha.

FWIW - the rotation in FF seems smooth to me.

Hi @mangobanan 

Welcome to the forum.

It sounds like you're looking for something like this?

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

Adding a transform perspective on the containing element can add a lot. You'll also see I split the tween into two as I thought it worked better in this case. Other than that, it's just a little finessing with timing and eases.

Happy tweening.

I don't follow the question and there is no revised demo, but it sure seems like you're trying to invent ScrollTrigger snapping. That's already available to you. Here's a basic example.

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

Seems to me that would be a better option than having the window take off while the user is scrolling.

Just my two cents but that feels pretty strange to me as a user to be scrolling along and the whole page takes off like that. 

I'm not sure I follow the question, but I think this is what you want it to do.

See the Pen 807639eafe80fbc8953cbaa02922759f by PointC (@PointC) on CodePen

Does that help?

Another pro tip for these kinds of morphs: change the start point of the path. The current start point is the upper left corner of the path. That's just the natural start when you create the element. Changing the start point is super easy with the scissors. I have a short tutorial about it.

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

If you ever have any doubt about the start point or path direction, you can add an arrowhead to check. More info.

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

Here's a screengrab of your project arrow and I've cut the path to start at the middle point of the arrow. I've also added an arrowhead in AI to double check.

When we make those changes, it all works quite smoothly and should give you the desired results.

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

Happy morphing.

4 hours ago, Vivodionisio said:

I believe I’ve been using the motionPathPlugin for animating the buttons (icons) into position. Did you mean I could be putting it to further use?

Nope - just making sure you were using it on the stickman project as I couldn't remember seeing it in that thread. What you have here with the buttons on the path is great. 

4 hours ago, Vivodionisio said:

I'd be thrilled to show you once it's done : ) 

Looking forward to it.  

Check this please: