PointC

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.

That looks like it works correctly to me. Perhaps you want different effects for different screen sizes? If so, check out matchMedia(). https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

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.

I think this thread can help you. Happy tweening.

Probably easiest to give each element its own timeline. https://codepen.io/PointC/pen/gOBKGZe/c45220bb9477f7805ca8c1ee07ae859a Hopefully that helps. Happy tweening. PS I'd recommend animating y instead of top for better performance.

I think your spacing is a bit off with the "bottom bottom" end and the extra top margin on the smooth-content. I've adjusted those and added markers so you can better see what's happening. I assume this is more what you wanted? https://codepen.io/PointC/pen/abRKLJb/f13078e10896c86f7f165e57ab17f7a8 Happy tweening and thanks for being a Club member.

Transform (scale, rotation) default points are in the center of HTML elements. Translation (x/y) is top left. If you want it to be in the center, try this. gsap.set(".box", { xPercent: -50, yPercent: -50 });

You'll need to target the rectangle in the clip-path rather than the clip-path itself. This seems to work correctly in Safari for me. https://codepen.io/PointC/pen/vYVrYeV Happy tweening.

This thread may point you in the right direction. Happy tweening.

The clip-path isn't working in your demo because it isn't applied to the group holding the image. Line 9 of the HTML needs to be: <g clip-path="url(#mask)"> Happy tweening.

Does adding this make any difference? #smooth-content { will-change: transform; } Happy tweening.

That's all the demos that come to mind for me at the moment. I'd recommend searching CodePen for something similar if those demos don't work for you. If you have any GSAP related questions, we're always here to help with those. Best of luck with the project and happy tweening.

Our own @OSUblake has a few examples that should put you on the right path. https://codepen.io/osublake/pen/mEpado https://codepen.io/osublake/pen/ezyyzG https://codepen.io/osublake/pen/reQdrN Happy tweening.

I think I'd create a timeline and use the dragger to update the progress. Using the handy mapRange utility to convert the minX and maxX position to a 0 → 1 progress should work well. Maybe something like this. https://codepen.io/PointC/pen/KKGRmbP Hopefully that helps. Happy tweening.

I'm with @Rodrigo in saying I don't quite understand the goal here. It looks like you want the bars to extend full length and then shrink down to their end point? 🤷‍♂️ If so, I'd say scaleX is gonna be a whole lot easier. Here's a quick fork of your demo. I've cleared all the extra stuff out of the HTML panel as it was causing the demo to not work. I've used a couple timelines for the bars and play them on click of each button https://codepen.io/PointC/pen/JjmvKQw/002366ab4d7ee265820e0ba42e3e67e2 Hopefully that helps. If that's not what you're trying to do, we need some more context please. Happy tweening.