PointC

Hi @klyvoon Welcome to the forum and thanks for joining Club GreenSock. 🎉 The issue here is an empty clip-path. If you want the yellow morph to reveal text, you'll need to use a duplicate path in the clip-path. I've forked your pen and just used one path to show you how to do it. https://codepen.io/PointC/pen/ExQMRba/1b01743fc6aa3e078c7d3cd2937967f6 A few other things: I'd recommend updating to the GSAP3 syntax. Stagger is a bit different now so be sure to check out that difference. Your pen was loading the latest GSAP, but also a really old TweenMax file. (could cause problems) Hopefully that gets you morphing. If you have other GSAP questions, let us know and we'll get you sorted out. Happy tweening and welcome aboard.

Hi @WolfLTC Welcome to the forum and thanks for being a Club member. 🎉 Are you referring to how far the page scrolls on each mousewheel on that site? If so, I'm not 100% sure, but I'd think you'd need to intercept the wheel event and preventDefault. Then scroll the page as far as you'd like. Happy tweening and welcome aboard.

Time to learn then. This is how I'd set it up. A couple big circles and eight smaller ones. Using svgOrigin we can rotate the small ones into place and use drawSVG to animate the path. This should get you started. https://codepen.io/PointC/pen/xxYBPYP Happy tweening.

You should create your timeline outside of your click handler. All you're doing right now is adding tweens on each click and creating a longer and longer timeline.

Exactly. You wouldn't need to do it with JS. You could also just set a height for the <li> elements and manually set a height for the <ul> in your CSS. The trialWarn:false thing is just for CodePen so you don't see any warnings in the console. Nothing at all to do with the animations. Happy tweening.

Is there any reason you're not using SVG? That would be quite easy with DrawSVG. I'd also recommend using ScrollSmoother. You're a Club member so you already have access to all those awesome plugins. Happy tweening.

Hi @Ves Welcome to the forum. I think I'd wire this up a bit differently. I'd create a timeline and scrub through it rather than add individual triggers to each element. Something like this. https://codepen.io/PointC/pen/BaYbaNb Hopefully that helps. Happy tweening and welcome aboard.

PS I should also mention that our own @Carl is doing a whole summer of SVG training thing. Check out his tweets and website. Here's one showing the basics of Boxy SVG.

A few examples of cloning your target and putting it on a MotionPath. https://codepen.io/PointC/pen/gOoKdOR https://codepen.io/PointC/pen/ExVzqdm https://codepen.io/PointC/pen/pojmBKJ And for simple dashes, you can animate the strokeDashoffset https://codepen.io/PointC/pen/YzYvLqN Good luck and happy tweening.

This thread can probably help you.

Okay, now I follow. Yeah - SplitText won't be the answer here. I'd just set it up as one timeline, use the parent container as a trigger and set scrub to true. https://codepen.io/PointC/pen/MWQLOYy/d0c1bbfdfaf738f29d61540e2eef6e19 Happy tweening.

Isn't that what your original demo is doing? Each <li> is triggering a color change. I don't follow your desired outcome. If you want the <li> elements to be on individual lines, you'll need to change your CSS and get rid of the display:inline. ul#hometext li { /* display:inline; */ font-size:80px; }

Hi @Jessiu Welcome to the forum. Sounds like you're looking for the SplitTextPlugin. That would allow you to split the text into lines and set up a ScrollTrigger for each one. The plugin is a perk for Club GreenSock members, but you can try it on CodePen for free. https://codepen.io/PointC/pen/RwQvZzp/462fb94d7a45cc5239461a133c8c6211 Hopefully that helps. Happy tweening and welcome aboard.

I think @Aizy is referring to the updated pen in which scale has been used rather than scaleX and/or scaleY. @Aizy see how @SteveS has used a combination of scaleY and then scaleX to achieve the desired outcome? You'll also want to remove that scale(0) in your CSS. Happy tweening.

rotate: '-=45'

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. https://codepen.io/PointC/pen/QZMraX

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. https://codepen.io/PointC/pen/jOZXXPa/5f9381468bbc6444d1ea73ff780a291a 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. https://codepen.io/PointC/pen/zYRyveM

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. https://codepen.io/PointC/pen/oNEQEYp/3c7f4f4ac6013860491e013d5514ce16 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: https://codepen.io/PointC/pen/GRQwMea/7df4af981abf20511d3a409acf0fe150 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. https://codepen.io/PointC/pen/vYdQJKy 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. https://codepen.io/PointC/pen/BaYGZaN/d29854ac5aaca6dd46fcd8d50dbcdc73

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.