GSAP Best Practices Help

[swansondesigns 4 Likes (Newbie)]

Hello,

 

I am learning more about GSAP in anticipation of needing it more on an upcoming project.  I've been practicing by animating some free SVG files that I found.  One of them has some speech bubbles that I thought would be cool to animate popping into existence followed by the lines of text within the bubbles animating in.  One of the rules around here is minimal demos, so here is where I started (please think of the green boxes as text bubbles and the white within as lines of text).

 

Version 1: Works, but it's long

See the Pen PoBJqaE by swansondesigns (@swansondesigns) on CodePen

 

This works exactly as I want, but, as you can see, it's pretty manual to get everything to work properly.  This seemed pretty silly since I'm doing the same animation for each item.  So I tried again.

 

Version 2: Ordering is wrong

See the Pen RwBLPEL by swansondesigns (@swansondesigns) on CodePen

This was not successful because the animation on the bubbles happens first and then the animation on the text happens second.  I researched "gsap effects" and that seemed promising, so I gave it a try.

 

Version 3: Works, but is it done properly?  

 

[This is the one below this post]

 

My basic question is "Is this done properly?".  Is this how an expert would do it?  It seems right, but I'm going to be doing a LOT of this pretty soon so if there is something that I can do better or more efficiently I'd like to fix mistakes now.  If I get stuck later because I didn't understand the downside of this approach I'm going to be upset that I didn't take the time to have someone check my work.  If I'm being honest, I thought I would be writing a function and passing elements to the function.  But that seems to mostly apply to individual values rather than creating animations themselves from a function.

 

I really appreciate that this forum exists and if there is anything else I can provide to make it easier to answer this question please let me know.

 

Thanks,

Graham

 

See the Pen ZEjXGVg by swansondesigns (@swansondesigns) on CodePen

[mvaneijgen 1,302 Likes (Superhero)]

Hi @swansondesigns welcome to the forum! 

 

I would not sweat it, if it works it works. There is so much 'optimization' you can do, that in the end you can't even recognize the code you've written, personally I'm of the mind to solve problems as they arise, so lets say you you're going to be animating 10000th of the blocks, then you'll need some optimizations or do you? GSAP is already so performant and optimized that you're not going to notice optimizations on such a small scale.

 

Personally I like to stick to .to() and .from() animations, because 90% of the time the element is already at there start or end position.

 

I've personally never used gsap.registerEffect() and as far as I know it is used to create animations that can be easily configured to have some other values, but I don't know if in your cause your are overcomplicating your setup by using it. I would use gsap.registerEffect() when I have a specific animation, but I want to configure certain values to be different on different elements. I don't see that in your demo, so I don't know if it is the perfect fit here.

 

I've forked your demo and add some CSS/JS to fix FOUC, see post bellow. 

 

Below the demo without the gsap.registerEffect() and .from() animations, hope it helps and happy tweening! 

 

See the Pen bGjoevP?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

[GreenSock 17,888 Likes (Superhero)]

Yep, I'd echo what @mvaneijgen said. If you're gonna need this effect in various places throughout your site/codebase, it could be nice to use an effect but in practical day-to-day usage, I really don't see a lot of need for registering effects. Often it's just as easy to create a function that does something similar. In your case, a loop like @mvaneijgen showed is perfectly adequate. 

 

Also, a minor note: I'd encourage you to move away from the old non-string version of eases: 

// old
ease: Elastic.easeOut.config(1, 0.75)

// new
ease: "elastic.out(1, 0.75)"

Good luck with your big project. 👍

[swansondesigns 4 Likes (Newbie)]

Thank you so much @mvaneijgen and @GreenSock!

 

@mvaneijgen That was SO helpful!  I was definitely over thinking this.  The loop you showed is much easier to understand and I don't need to register an effect to accomplish what I'm trying to do (but nice to know it exists if I do need that later).  I took what you gave me and tried to apply it to my practice project but I think I oversimplified a bit.  I'm actually trying to animate some nodes inside an SVG file and they aren't in order.  So I forked your pen and came up with this method of animating elements that aren't quite in the right order.

 

See the Pen mdjBXgB by swansondesigns (@swansondesigns) on CodePen

 

Because I want the "person" to appear first, but the person nodes aren't in order, I just grabbed a separate node list for them and added them with .item() by node number using the counter.  This seems to work just fine.  Is this how you would do it?

 

@GreenSock  Thank you for taking a look and also for the tip about updating the easing setting.  I will make sure I get them from the ease visualizer from now on.  I probably just copied something from an old tutorial.

[mvaneijgen 1,302 Likes (Superhero)]

Looks fine. I would maybe wrap each row in it's own container, so that I can forEach that, but that completely depends on your setup. Again, if it works it works. There is always time to improve, but personally I like working and readable code instead of fully optimized code.