PointC

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.

hmmm... that's a bit different than the first post was describing. I don't see any morph nor is the path changing during the animation. You could certainly do some calculations to drop the arrowheads into the correct positions, but since you're a Club member, I'd probably use DrawSVG and the MotionPath plugin together to get to the most flexible solution. Happy tweening.

x & y are attributes as well as CSS properties. Unless you put the y:250 in the attribute wrapper, GSAP will assume you want to animate the transform (translateY) which is what was happening in your demo. You wanted all the <rect> elements stacked on top of each other so you wanted to target the y attribute of the rectangles. It can be a little confusing with the overlap between properties and attributes. Bottom line, if you want to target a specific attribute, use the attr:{} wrapper. I'm not sure what you mean here. It could be as simple as setting up a repeat of 1 and yoyo:true. It would depend on the desired outcome. Happy tweening.

Sounds like you're trying target the y attribute. Please give this a try: gsap.to(".bars", { attr: { y: 250 } }); Happy tweening.

I'm pretty lazy so I think I'd approach this a bit differently. Using a small gap in the grid and a colored background div, you can fake the line drawing and all the calculations are taken care of by the CSS grid itself. https://codepen.io/PointC/pen/GRYmZmv It has some limitations and the top and bottom borders "pop" on, but that could easily be fixed by animating them separately. Just my two cents. YMMV. Happy tweening.

That thread was just to show you how to animate along a path that is changing during the animation as that's the tricky bit of what you're trying to do. Morphing a target object as it follows the motion path is fairly straight forward. Plop your morph elements into a group and have the group follow the motion path. Then you just need a separate tween on the timeline to handle the actual morph. Basic example. https://codepen.io/PointC/pen/ExdmaRr Happy tweening.

Sure, you can do all that with GSAP. I think this thread could help you. Happy tweening.

Yeah, I'd need to see a demo to offer any help. Just FYI - SVG clip-paths or masks work well for the invert effect, but you can also use CSS variables without a duplicate element like this demo. Just another option. https://codepen.io/PointC/pen/ZErvbPR

Please give this a whirl: gsap.to( {}, { duration: 0.5, onUpdate: function () { console.log(this.progress()); } } ); Happy tweening.

Stops by again and whispers *be lazy. use the MotionPath plugin*. Get your work done quickly and go for pizza. 🍕. YMMV.

Wow - is that @Shaun Gorneau dropping by with knowledge? Probably needed to dust off the old GS Mod Badge.

A couple similar demos from my archive that may be helpful. https://codepen.io/PointC/pen/ExVzqdm https://codepen.io/PointC/pen/pojmBKJ Happy tweening.

Hi @tilohi8071 Welcome to the forum. If I understand your desired outcome correctly, I'd tap into random and repeatRefresh like this: https://codepen.io/PointC/pen/JjmdvgQ/eeadbc4fec40ac5924627de100a06d19 Hopefully that helps and welcome aboard.

Your filter is applied to a parent div → .header-wrap2, but you're animating it to a blur of 0 on the child div with an ID of cattle. Target the parent and use px after the zero and you should be good to go. .to(".header-wrap2", {'filter': 'blur(0px)', duration: 1}); Happy tweening.

Switch your buttons to inline-grid and make sure you're selecting the actual span and you'll be good to go. https://codepen.io/PointC/pen/eYPOabg/e1b1174eaaf3a0f188ea8896a7c19127 Happy tweening.