Code organisation, best practice on first tween

[david_br]

I started learning GSAP yesterday and made my first basic tween, so much fun.

 

The tween works OK but before I move on to another and likely repeat obvious mistakes I was wondering if somebody could kindly take a brief look at the GSAP code and advise on mistakes / better organisation. There are plenty of very similar requests, is their a best practice that combines them into single lines or is that just not necessary?

 

And secondly, I was considering adding this to a timeline but couldn't necessarily see how that would be beneficial for this specific case.. would it be overkill? From reading the docs a timeline could make it easier to manage animations if I later wanted to adjust the timings later but is their any other benefit in this case?

 

Best,

David

 

 

 

 

 

See the Pen qBbBdLV by db-24 (@db-24) on CodePen

[Shaun Gorneau]

Hi @david_br

 

Welcome to GSAP! Your code looks really good to me. Anything I would add would be more of a preference type of thing. What I show below might not seem too significant within the context of this example because we're talking about 6 tweens. But, in the context of dozens of tweens, you would see how these tips can help.

 

I like to establish non-tweenable properties using .set() rather than as part of a to/from tween. I do this because it helps me see my "starting points" and more clearly see which properties I am tweening (later with to/from/fromTo). An example here would be transform-origin.

 

If I find myself repeating properties, I tend to want to consolidate them to reduce repeating myself. An example here is where many of your tweens use the same ease. Of course, in this case, that's only 4 ... but in a larger context you might not want to type that over and over again.

 

Lastly, a timeline is beneficial, even in this case, because it allows for better control of sequencing. Imagine this was 30 tweens and you changed the delay or duration value (or both) of the 3rd tween. All that follow would also need to be changed to accommodate this. With a timeline, I can stack the tweens and they will happen sequentially. If I need to make a tween start sooner or later than a natural flow, I can use the position parameter to start the tween either

 

- later than natural ... maybe a half second later ("+=.5")

- sooner than natural  ("-=.5")

- at an absolute value, here at 4 seconds (4)

- at a defined position label, ("someLabel")

- at a time relative to a label ("someLabel+=4")

 

And if I change a duration and/or delay of any tween at any point in the timeline, all that follow will respect the relative positions. You won't have to recalculate.

 

Also, because the entire sequence is a timeline, you have direct control of its progress() and can manipulate that (button clicks, sliders, mouse movement, etc.)

 

Have a look at this CodePen where I do each of the the things above. One thing you'll notice is the commented out "add()" lines. They're commented to first show you the natural sequencing of the tweens. If you uncomment them, you'll see the timings you originally created using delays. And then (to see the real benefit) change the duration of your first 2 tweens to see how the following tweens fall into place without needing to change anything about them.

 

Some things to note about the position labels I'm using. When you first use a label, it creates it at that point in the timeline. Any tweens that later use that position label have their position set to where that label was created. So, without the add() calls, I'm just creating the label and then the following tween is being set back to that label's starting position. They become "zero'd" out relative to each other.

 

With the add(), I'm establishing that label at that point in the timeline and then assigning the two following tweens to that (now relative) position. It is in the add() that I'm able to use a relative position from the previous label to get the sequencing you achieved with delays.

 

See the Pen qBbBpaz?editors=0010 by sgorneau (@sgorneau) on CodePen

 

Happy tweening!

 

Shaun

 

Edit: Lots of typos

[david_br]

Thank you so much, this is beyond the kind of response I was hoping for! So helpful to have some feedback before I learn too many bad methods and awesome that you made a new timelined version for comparison.

 

I will definitely pull out the non-tweenables going forward because it's much cleaner that way and the use of defaults is exactly the kind of thing i was looking for to keep things tidy ( I actually just watched a little video on use of defaults in the Creative Coding Club video series on GSAP which was also helpful). Seems like it's also possible to nest timelines so I guess defaults could also be set on each if necessary. 

 

4 hours ago, Shaun Gorneau said:

Also, because the entire sequence is a timeline, you have direct control of its progress() and can manipulate that (button clicks, sliders, mouse movement, etc.)

... ah gotcha! I could see the advanced sequencing would improve things but hadn't really considered how I would then actually manipulate the animation.

 

I'm a little unsure about how you've used the add() calls and labels so i'll read up on that this evening.

 

Thanks again Shaun 

[Shaun Gorneau]

Happy to help, @david_br!

 

One thing I forgot to mention ... I changed the opacity property to autoAlpha because it takes into account a few things that opacity alone doesn't account for (like how "opacity: 0" still get's pointer-events, for example).

[PointC]

Sure is good seeing you around a lot these days @Shaun Gorneau. 👍

[Shaun Gorneau]

Good to be around, @PointC! One of my favorite places to be! 👍