PointC

I'm not quite sure what you're trying to accomplish with the infinite repeats on some of the tweens, but this thread may offer some helpful info too.

Sounds like a good use case for clamp() https://codepen.io/PointC/pen/dygQaPj/da853be09052e3296cc321b566e75353

Looks like they have a waves section with two SVGs in it and then they animate the wave container div along the x axis. You can inspect the CSS to see how they've lined up the images. There are multiple ways to go about it. x translation, morphing, animate individual points of the wave. All can work. You would just use the same fill color for the waves as the next section of the page and it'll look like the waves are along the top of it. There are many wave animation threads around the forum. Here's one to get you started.

I'm not seeing anything move to the left. It all looks correct to me. Just my two cent approach, but for little arcs and circles, I like to use type:rotation for these types of interactions. Here are a few examples from a Motion Tricks tutorial that never got published. Maybe they will give you some ideas too. https://codepen.io/PointC/pen/dyggEJE https://codepen.io/PointC/pen/NWOOVYd https://codepen.io/PointC/pen/rNqqgvK Happy dragging.

There are a bunch of videos on YouTube to teach you how to use SVG masks. https://www.youtube.com/results?search_query=svg+masking

You're looking for collision detection. There are several threads about the topic around the forum. Here are a few to get you started.

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. https://codepen.io/PointC/pen/VwEGVLK Hopefully that helps. Happy tweening.

No - there isn't a tutorial video, but searching YouTube should give you plenty of options. https://www.youtube.com/results?search_query=svg+clip-path

Sounds like you're looking for these: https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute https://developer.mozilla.org/en-US/docs/Web/API/Element/classList https://developer.mozilla.org/en-US/docs/Web/API/Element/className

I'm not sure I follow the question, but it sounds like you may be looking for the the isInViewport() method. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.isInViewport() If not, a minimal demo would be helpful. Thanks.

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

Sorry - what do you mean a video? Like a tutorial?

Here's something similar from my demos: https://codepen.io/PointC/pen/MWwqrjO Notice the two lines move at the same time as the clip-path reveal. That's how you'll get the same reveal effect from your video.

Glad you got it sorted. Just FYI - I think there were two issues. One was the FOUC. The other was starting the lines at "50% 50%". The former is easily fixed with a quick autoAlpha. The latter may not be so obvious. You were seeing the "dots" of each line at 50/50 because the stroke-linecap is set to round. If you need to start at 50/50 like that, you need simply add a quick scale tween before the stroke animates. Something like this: https://codepen.io/PointC/pen/YzJjMyJ/e9a42d9c21dac238ab76c0bd4d36e524 Hopefully that makes sense. Happy tweening and thanks again for being a Club member.

Pop that mask into your SVG and scale it up enough that it covers the whole screen. Give it a try and we'll help with any GSAP related problems you encounter. Happy tweening.

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

No idea what that site looks like as each time I try to visit, it just hangs and won't load. ?‍♂️ If you search the forum for "carousel", you should find several threads. Here's a good one to get you started. Once you have something started, create a minimal demo for any GSAP related issues you run into and we'll do our best to assist you. Happy tweening and welcome to the forum.

Welcome to the forum. I'm not quite sure with which part you need assistance, but I've forked your pen and made a couple changes. I've used a label to animate the left/right lines at the same time. The opacity fade for line 3 wasn't working because it isn't an attribute - no need for the attr:{} wrapper on that one. https://codepen.io/PointC/pen/qBJyPjB/f67666b18e77e03393f8937257465bfa Just FYI - no need for html and body tags on CodePen. You can just paste your core HTML into the top panel and the CSS and JS in the appropriate panels as well. The use of labels is covered here: Hopefully that helps. Happy tweening.

If I understand your goal correctly, it would be best to make the body the trigger. https://codepen.io/PointC/pen/OJBwxpg/4cfca8354a6819dacdba464b376353af Hopefully that helps. Happy tweening.

snap: { textContent: 1 } https://codepen.io/PointC/pen/KKGBXaR/10c8677689d49df47fe1e690eca483cb 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. https://codepen.io/PointC/pen/OJBwJzd/b300c7bf37ea7a9567e1733d87bbbe30 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.

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. https://codepen.io/PointC/pen/qBJKzLo Hopefully that helps. Happy tweening.

Hi @KevinS Welcome to the forum. With two ScrollTriggers targeting the same element, you want to set immediateRender:false on the 2nd one. You'd also want to skip toggleActions when you're using scrub. Finally, I'd recommend a linear ease with scrub. Here's a fork of your demo with those changes. I think this works as you intended. https://codepen.io/PointC/pen/jOeKzRr/05a976e3c356393c5f4058c1b9e5fdfb Hopefully that helps. Happy tweening and welcome aboard.

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.

I'm not sure what you're asking. You want the photo sections to pin and reveal each picture? If so, check out pinning in the docs. https://greensock.com/docs/v3/Plugins/ScrollTrigger If you post a minimal demo with what you have so far, we can point you in the right direction.