Jump to content
Search Community

Difference in Timelines and just Variables?

Jim Nayzium test
Moderator Tag

Recommended Posts

I  see this in the timeline tutorial... so the object is being declared and defined and I assume things "come along for the ride" once that has happened.

var tl = gsap.timeline({repeat: 2, repeatDelay: 1});

But then I also see this type verbiage in places where just a variable is declared:

let tween = gsap.to(".class", {rotation: 360, duration: 5, ease: "elastic"});

Which let's us do certain other things with that GSAP call on the .class etc...

 

So, I get the TIMELINE visually. And as a former Flash Actionscript 2.0 guy, I totally picture LITERAL timelines in my brain when I see it tl.to( etc...

 

BUT can you break down for me how " tl.to "  is different from chaining the gsap objects back to back?

 

Or is it not possible to chain them to each other?

 

tl.to("#id", {x: 100, duration: 1});
tl.to("#id", {y: 50, duration: 1});
tl.to("#id", {opacity: 0, duration: 1});

////// VERSUS

gsap.to("#id", {x: 100, duration: 1}).to("#id", {y: 50, duration: 1}).to("#id", {opacity: 0, duration: 1});

And also can someone provide for me the "handy little way to remember" when it's best to use VAR versus TIMELINE ?? Like a "general rule of thumb?"

 

I get how wanting to scrollTrigger SCRUB would be a time for a TIMELINE. But other general philosophical reasons one over the other? 

Link to comment
Share on other sites

37 minutes ago, Jim Nayzium said:

BUT can you break down for me how " tl.to "  is different from chaining the gsap objects back to back?

 

Or is it not possible to chain them to each other?

 

It's not possible. It sounds like you might not be understanding the difference between a tween and timeline. There is a lot of overlap in the methods and options, but a timeline is basically a container for tweens.

 

For a set of tweens to behave like your timeline, you would need to something like this.

// notice the delays
gsap.to("#id", {x: 100, duration: 1})
gsap.to("#id", {y: 50, duration: 1, delay: 1 })
gsap.to("#id", {opacity: 0, duration: 1, delay: 2});

 

A timeline has a .to() method, but that it's just a shorthand way of adding a tween. What's happening under the hood....

let tween1 = gsap.to("#id", {x: 100, duration: 1});
let tween2 = gsap.to("#id", {y: 50, duration: 1 });
let tween3 = gsap.to("#id", {opacity: 0, duration: 1});

let tl = gsap.timeline();
tl.add(tween1);
tl.add(tween2);
tl.add(tween3);

 

37 minutes ago, Jim Nayzium said:

And also can someone provide for me the "handy little way to remember" when it's best to use VAR versus TIMELINE ?? Like a "general rule of thumb?"

 

Not sure what you mean by "VAR", but just use a timeline if you have more than 1 animation that needs to be grouped/sequenced. If you have a single animation that can play independently of other stuff, then use a tween.

 

  • Like 5
Link to comment
Share on other sites

6 minutes ago, OSUblake said:

Not sure what you mean by "VAR"

 

Pretty sure I meant "let" (and or var) like when would you use a variable to hold on to your TWEEN versus wrapping that tween into a timeline. (was what I was getting at.) I understand when a timeline mentally jumps out if you need something to animate sequentially. 

 

But why ever us "let my_tween_var = gsap.to(); " etc... versus wrapping it in a simple timeline ? 

Link to comment
Share on other sites

9 minutes ago, Jim Nayzium said:

But why ever us "let my_tween_var = gsap.to(); " etc... versus wrapping it in a simple timeline ? 

 

For the same reason you would put anything in variable. You're need to use it somewhere else in your code, like controlling the playback.

 

See the Pen 0abe5d8654c647a1d0343a9e054ed63e by osublake (@osublake) on CodePen

 

 

  • Like 3
Link to comment
Share on other sites

AHHHH! I think it clicked for me now.

So basically, a variable would always be more concise way to store ONE TWEEN. Versus going to the trouble to declare a full timeline object to simply store ONE tween in it, right?

 

Meaning you could feasibly have declared "let tl2 = gsap.timeline" on the ".box" one also, but since there only would have been ONE tween inside that Timeline, it just makes more "conciseness" sense to delcare it as a variable and roll with it so you can reference it later that way.

 

So it would be fair to say, 

 

VARIABLE is best used as a "container" for ONE tween you'd want to reference later.

 

TIMELINE is a best used as a "container" for MULTIPLE TWEENS you want grouped together (for whatever purpose that may be.)

 

??

Link to comment
Share on other sites

48 minutes ago, Jim Nayzium said:

Meaning you could feasibly have declared "let tl2 = gsap.timeline" on the ".box" one also, but since there only would have been ONE tween inside that Timeline, it just makes more "conciseness" sense to delcare it as a variable and roll with it so you can reference it later that way.

 

Right.

 

48 minutes ago, Jim Nayzium said:

So it would be fair to say, 

 

VARIABLE is best used as a "container" for ONE tween you'd want to reference later.

 

TIMELINE is a best used as a "container" for MULTIPLE TWEENS you want grouped together (for whatever purpose that may be.)

 

The Timeline statement sounds good. The Variable one doesn't because you might put a timeline in a variable just like I did in that demo. And relying on the term "variable" can get even more muddied once you start doing more advanced stuff, like using functions to return animations.

 

Just think in terms of tweens and timelines. 

 

  • Like 5
Link to comment
Share on other sites

@Jim Nayzium,

 

A tween is just that, a single tween of one or more properties on a matched element or elements.

 

A single element

See the Pen wvJKVwK by sgorneau (@sgorneau) on CodePen

 

Multiple matched elements

See the Pen GRWpVKV by sgorneau (@sgorneau) on CodePen

 

A timeline contains one or more tweens that have timing controls to dictate when they begin and end on the timeline. The can begin relative to the timeline (at absolute positions .. like 0, 5, 20) , relative to each other ("+=3", "-=2",), or at named labels ("someLable"). You would use a timeline where sequencing is necessary.

 

A simple timeline

See the Pen eYvpqYG by sgorneau (@sgorneau) on CodePen

 

A more complex timeline

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

 

As far as variables go, with regard to both a tween and a timeline, a variable is used to reference that tween or timeline in the future. It's that simple. Neither require a variable, but it can make life easier to store them in variables at times, especially timelines.

 

With the "more complex" timeline above, things are good ... until I need to dynamically add to the timeline or manipulate in some way later (pause, reverse, etc.). There is no reference to it. Once I'm stop chaining methods .. it's done. But, if I hold it in a variable to reference, I can do a lot with it. I can add tweens to it based on future logic, I can reverse it. I can jump to a specific timestamp or label.

 

See the Pen jOBbgqB by sgorneau (@sgorneau) on CodePen

 

 

  • Like 7
  • Thanks 1
Link to comment
Share on other sites

That's awesome! Thanks for the break down! Just what I was wanting to see... tangible examples of it all like the demos. I am looking forward to getting my first thing finished and pushed to the demo servers from my machine to show it off... I am sure folks will be able to improve upon it! :) 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...