PointC

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.

Yes - you set the #quote div to opacity:1, but you're animating the opacity of the characters which are all in their own div. Think of the original #quote div as the parent and all the line,word and char divs as children created by SplitText. Hopefully that makes sense. I think @Rodrigo's snippet above should get you all fixed up. Happy tweening.

Look at @Cassie and her fancy flips.

You're part way there. Good job. You'll want to create a timeline for each section and animate the .text class from opacity:0 after the box fades into view. Something like this should work. https://codepen.io/PointC/pen/ZEqxMrV/56deefd4eca5c79818393d4635661fdb Happy tweening and thanks for being a Club member..

split-type is not a GreenSock product so we can't offer any support for it. Perhaps you need to look at the SplitText plugin. Best of luck.

Yes. Probably a few ways to go about it. Use split text and animate the characters or words opacity value. Use an SVG and animate a mask over the text targets. Use a div over the top of the text which has the same color as the background and a low opacity. Then animate the div on the x axis. Just a few thoughts off the top of my head. Happy tweening.

That's happening because your 'disappear' tween ends with an opacity of 0. Then you click the 'show' button which is a from tween, but it tweens from 0 to its current value which is also 0 so it appears nothing is happening. Probably best to use a fromtTo() tween if this is the way you want to wire this project. https://greensock.com/docs/v3/GSAP/gsap.fromTo() Happy tweening.

There have been a bunch of motion blur threads over the years. There are probably more, but some that I recall: Hopefully one of those points you in the right direction.

Check out the callbacks in ScrollTrigger. https://codepen.io/GreenSock/pen/qBdeVJY Docs: https://greensock.com/docs/v3/Plugins/ScrollTrigger Depending on your needs, the Observer plugin could also be an option. https://greensock.com/docs/v3/Plugins/Observer Happy tweening.

It's not working because it isn't there. Add that to your mouseLeave listener and it works just fine. https://codepen.io/PointC/pen/wvYrxbY/3359c5bf62e9674d1d54f4c84db96231?editors=1010

Couple of small things: You set your clip-path in your CSS to #myBoatMask, but it had no name in your HTML. You'll want to animate a child group of the group that is actually clipped. Make those changes and you should be good to go. https://codepen.io/PointC/pen/QWZqBrZ/1e25b266f580040a4f6a7cdca25f38f0 Happy tweening.

Jack beat me to it, but yep - DrawSVG makes that super easy. https://codepen.io/PointC/pen/BaKGyaa Happy tweening.