Jump to content
GreenSock

Dipscom

Understanding the .from() behavior

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I did try to find a discussion about it in the forums but, I guess because I just want to know WHY, oh WHY, it behaves like that, people don't ask much.

 

Again, I kind of guess what GSAP is doing and can accept it as an expected behaviour. It is just nice to be able to understand the workings of it.

 

The case is the following: I was trying to use a .staggerFrom() twice, one after another. And, as one would suppose, it does not work. The reason being, I believe, is that GSAP reads the properties on the timeline creation but once the second .from gets called, it gets rather confused as to what is the initial properties of the element being tweened. In the codePen example it would be opacity:1 (working with autoAlpha).

 

But, in my head, the logic would still stand if I were to run the .staggerFrom() without setting the autoAlpha:0. Unfortunately, computer says no (sorry world, it is a british pun). Computer also says no if I do set autoAlpha:0 before calling the .staggerFrom().

 

Obviously, I do know how to get around this, as you will see on the codePen. It is just that I NEED TO KNOW WHY!

 

So, Mr. Code-god who answers by GreenSock, I beg, descend down to these lowly levels and shine a speck of thy knowledge upon ickle me. May I not be burned by your radiance.

 

And, anybody else who knows anything about it is always welcome. 

 

Thanks chaps!

See the Pen dYqzwX by dipscom (@dipscom) on CodePen

Link to comment
Share on other sites

What's the opacity value your tween is is created? Look at the console and you will find your answer. It shows the pre and post values. If I'm at 0 and I move from 0, I'm still at 0. 

 

See the Pen OyoOoy?editors=001 by osublake (@osublake) on CodePen

  • Like 1
Link to comment
Share on other sites

I may not have understood your question properly, but maybe this will help....

 

  • Timelines do NOT read properties upon timeline creation. Timelines are just made of of tweens (or nested timelines that have tweens, etc.) and a tween reads/records its start/end values the first time the tween renders
  • from() tweens are unique because by default they will render (and set the initial values) immediately because that's what most people want. Imagine a from() tween that has a delay of 2 seconds. Most people want the starting (from) values to be set immediately...then wait that 2 seconds...and then animate from there. It'd be weird if absolutely nothing happened for 2 seconds and then the values jumped to their from() state and animated backward from there. 
  • Sometimes you want to override the default behavior and say "hey, from() tween, please don't render the from values immediately...just wait until you start running before jumping." - that's exactly what immediateRender:false is for. 
  • The reason it's generally a little odd to run multiple from() tweens on the same element/property is because by default they'll all render immediately, meaning the last one "wins" in terms of the initial state, and the fact that they each render immediately means that they'll affect each other's ending state. For example:
obj.x = 0;
TweenLite.from(obj, 1, {x:100}); //immediately sets x:100
TweenLite.from(obj, 1, {x:200, delay:1}); //immediately sets x:200 and records the current value (100...due to the previous line) as the end value

So in the lines above, you may have wanted x to start at 100, animate to 0, and then jump to 200 and animate back to 0. But no, it will go from 100 to 0, and then 200 to 100, Hopefully it's clear why now. 

 

If you don't want that behavior, all you need to do is set immediateRender:false on subsequent from() tweens. 

 

In real-world scenarios, we typically see people only using from() tweens to animate things into place, and then from there to() tweens are almost always used. So this default behavior gives folks exactly what they'd expect in the vast majority of circumstances. If you want a different behavior, there's immediateRender:false, or there are many other ways you can do it by using to() and/or set(). I generally find that from an intuition standpoint, it's typically best to use primarily to() tweens except for the initial animation into place (when you've got things set up in their end state initially). 

 

Does that help at all? Or did I completely misunderstand your question? 

  • Like 4
Link to comment
Share on other sites

What you have proven, OSUblake, is that I had a rather wrong understanding of how GSAP calculates the Tweens. I did imagine it would read the initial values, move on to the next line, calculate it, move on, and so on.

 

But still, something eludes me. Because, it appears that GSAP reads the current value of the element, stores it and move on. And so, if I am tweening from 0 all the way into 1. I though, if I called the .from() method again, it would have 1 as the initial value once more, therefore, tweening for 0 again all the way to 1.

 

That does not happen. Looking at the console and the logs you have provided, it seems to me that GSAP sets the property as the tween is calculated, moves on but does not actually tweens the element. Only at the end of the completed construction of the timeline is that the actual tweening takes place. 

 

Makes a bit of sense when looking at it for the fifth time today but still feels like the tweening is being calculated backwards in terms of their positioning.

 

 

* Jack, just saw that you have given an in depth reply as well. Will get read it later on. Got to go back and do some work right now ;)

Edited by Dipscom
Link to comment
Share on other sites

Hi Dipscom,

 

First, be sure to read Jack's explanation above! 

 

I could not ignore your colorful request. I made a little video for you.

 

Please wear protective eyewear and sunscreen so that my radiance doth not blind thee!  :mrgreen:

 

https://youtu.be/F3CIRYjDvME

  • Like 4
Link to comment
Share on other sites

I laughed, I cried, it was an emotional roller coaster of a movie. If you see only 1 Carl video today, this is the one you want to see:-P

 

@Carl - seriously - very helpful and it all makes perfect sense when you really stop and think about it.

  • Like 4
Link to comment
Share on other sites

Great explanation of from() tweens Jack! And thank you Carl for making that video it will be a great resource to link to in the forums :)

  • Like 2
Link to comment
Share on other sites

You guys are hilarious. 

 

Yeah, 2 thumbs up for what's bound to be a blockbuster hit from indie director Carl Schooff. No doubt it'll win at least 1 Oscar. Pop yourself some popcorn, cozy up in your office chair, and enjoy. ;)

  • Like 3
Link to comment
Share on other sites

Thanks, all. Glad you liked it. The reviews are legendary. :)

  • Like 2
Link to comment
Share on other sites

I laughed, I cried, it was an emotional roller coaster of a movie. If you see only 1 Carl video today, this is the one you want to see:-P

 

@Carl - seriously - very helpful and it all makes perfect sense when you really stop and think about it.

 

So funny... I've actually watched a lot of Carl videos today.

 

@Dipscom

I think the way you are using add in the timeline is also messing with you. You're not doing anything wrong, but the order in which things are happening may not be what you think. Notice in the console how there is no delay between the two fadeIn calls.

// This fadeIn is called immediately
tl.to(cs, dur, {rotation:"360"})
  .add(fadeIn(cs))

// This fadeIn happens after the .to tween
tl.to(cs, dur, {rotation:"360"})
  .add(fadeIn)

  • Like 1
Link to comment
Share on other sites

Quite a bit of action while I made my way home today, which involved avoiding a rather large protest, no buses and a heavy laptop bag on my shoulders.

 

Jack, you got the question right. And did a great job of explaining the ins and outs of it. I even gleamed some extra information from the other things you have said. Thank you.

 

Carl, what can I say? Well, I can say I don't believe you made a video because of this question. I also can say I am basking in the rays of knowledge shinning green.

 

Blake, there are a lot of things that mess with my head. But I can see what you're pointing out. That is one thing I am trying to make sure I can visualize. There have been plenty of instances where I have to create one massive timeline with dozens and dozens of lines to get the effect I need and a lot of times it comes with massive headaches.

 

Being able to understand how it behaves is crucial to me as you might appreciate.

 

All in all, guys, thank you. It did answer my question. The dilemma now is to mark as answered by the GOD or the DEMIGOD...?

  • Like 2
Link to comment
Share on other sites

Just to mess with your head some more, look at how awesome from tweens are. One simple little tween per element does the entire layout. Very little code at all. Just click and drag.

See the Pen QjQGBa?editors=001 by osublake (@osublake) on CodePen

 

If you can't tell what's going on, I made demo to help people visualize it better. Just watch where the colored blocks go.

See the Pen gavGdL?editors=001 by osublake (@osublake) on CodePen

  • Like 4
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.
×