PointC

Did somebody say confetti cannon? https://codepen.io/PointC/pen/RyaJmj I'd recommend going with something like what @OSUblake posted above. Simple and easy. Happy tweening.

Hi @mechaniac Welcome to the forum and thanks for joining Club GreenSock. That's a limitation of SVG for now.(SVG 2 may be different) You can't rotate those child elements in 3D space, but you can rotate the entire SVG. https://codepen.io/PointC/pen/oNvEExq Hopefully that helps. Happy tweening and welcome aboard.

I think this is the thread @OSUblake was talking about. Happy tweening.

Here's a little demo I did a few months ago as an answer for another thread, but maybe it'll give you some ideas. It works, but if the duration is too quick you get a chunky line. https://codepen.io/PointC/pen/NmqowR Happy tweening.

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/findShapeIndex.js

Just to add my two cents here, the original pen setup is making the timeline longer on each click. That's why the reverse seemed slow to respond. @elegantseagulls offered solid advice about that solution. I'd also like to point out that you need to set the timeline vars reversed:true to get that listener to work correctly. Otherwise the first click reverses the timeline and nothing seems to happen. All that being said, I also don't know much about Vue, but maybe this similar thread will help. Happy tweening.

I should also point out that this will work with a stagger as well. Doing it that way also has the advantage of using a negative stagger value which negates the need to make an array from the node list and reversing it. https://codepen.io/PointC/pen/JjPJbBR As with all things GSAP, there are many paths to the same destination. Happy tweening.

PS If you want them to go from 1 --> 0.2 like your CSS demo, just switch the tween to a .fromTo() TweenMax.fromTo(b, 5, {opacity:1}, { opacity: 0.2, immediateRender: false, delay:delay, repeat:-1 }); Happy tweenig.

I see. I think I'd probably just use a from() tween in this case since each group has a different opacity. You then have them all start at opacity:1 but animate down to their original opacity over the 5 second duration. Maybe something like this: https://codepen.io/PointC/pen/yLBXaOo Does that help? Happy tweening.

Why not just use a stagger? tl.staggerTo(bars, 0.1, { opacity: 0.2 }, 0.06);

You're trying to use the position parameter on a standalone tween. That will only work for a timeline tween. You'll want to use a delay on that tween.

Just to clarify, you can add a label in the position parameter of a tween if it doesn't already exist. I personally find it easier to read by doing what Zach did with addLabel() or you can also just use .add("myLabel") too.

This post is also a great explanation of the license:

There's a nice overview grid of GSAP and what's included here: https://greensock.com/docs/ There are also Club Plugins listed there. More info about the Club and bonus plugins can be found here: https://greensock.com/club/ Happy tweening.

That's a bit of FOUC. You can set the .container (or whatever element you like) to an opacity: 0 and/or visibility: hidden in your CSS and then use GSAP to set it back to 1. Something like this: TweenMax.set(".container", {autoAlpha:1}) Happy tweening.

I think I'd probably put this on a timeline and play/reverse on hover. Maybe something like this: https://codepen.io/PointC/pen/NWKpeLY Does that help? Happy tweening.

Yep, take a look at the Bezier Plugin. Though your other thread mentioned morphing and now it sounds like you'd benefit from the path to bezier method of that plugin so I'd recommend a Club membership. It'll save you a bunch of time and headaches. https://greensock.com/club/ Just a thought. Happy tweening.

This should work for you. https://codepen.io/PointC/pen/xxKqGqq Happy tweening.

If you check the console you'll see that headingRedf is not the <h1>, but rather an object. This will make it move. tl[0].to(headingRedf.current, 1, { y: +30, }).to(headingRedf.current, 1, { y: 0, }); You're also getting a console error about exports not being defined. That's all I can offer with my lack of React knowledge. Happy tweening.

I don't know anything about React, but what you have wired up there is returning an array for the tl variable. A timeline is the first element in the array and then a function. This seems to fix it. tl[0].to(headingRedf, 1, { y: +30, }).to(headingRedf, 1, { y: 0, }); Again, I have no knowledge of React so others will probably jump in with a proper solution.

Load GSAP into that pen and add this line: TweenMax.to("text", 0.5, {y:10, yoyo:true, repeat:-1}); That will move the mask text up and down. Happy tweening.

If you can post a demo with what you've done so far, I'll take a peek.

Yes, you can animate a SVG mask. You can also switch the text in the mask to a path if you like. My advice would be to start trying things and see what works and what doesn't. The best way to learn is to start messing with code and see what breaks. Happy tweening.

Happy to help. Sounds like you've got it now. ? You can also use each: instead of amount if you need exact staggering durations for each element. Stay tuned for the next release of GSAP 3.0 when advanced staggering adds some fun new features. Happy tweening.

Hi @Fakebook When you use the special advanced stagger property in the vars it will overrule the normal stagger parameter. Here's a fork of your pen in which you can see I just made the stagger parameter 100, but everything works as expected. You can put null in that spot too so your position parameter is correct. https://codepen.io/PointC/pen/xxKggye Does that help? Happy tweening.