Jump to content
Search Community

Understanding fromTo

chaoti test
Moderator Tag

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

First post, so I may be a n00b.

 

I've noticed that if I am using TimelineLite and I instantiate a fromTo tween that until the TImeline fires the tween for the first time, the css associated with the from portion of the animation is not reflected until that moment. 

 

in other words if I animate fromTo() and set the 'from' opacity to 0, it will be visible until that animation starts, then it will animate from '0' to whatever. I would imagine this is not intentional so I want to clear up the possibility that it is a built in limitation before I debug my code, as it is large and involved.

 

I am adding tweens to the timeline via other js functions , so it my be my code is doing something funky but I need to make absolutely sure no one else can reproduce this issue.

settings.startOpacity = 0;

tl.add(
	TweenLite.fromTo(target,s,{
		opacity:settings.startOpacity,
	},
	{
	        delay:delay,
		opacity:settings.endOpacity
	})
);

// so once this fires it works fine, but before then the opacity is set to 1.

To further complicate things, setting the css via the style sheet to 0 does not work as the browser then sets it to 1, regardless of adding an '! important' tag.

Link to comment
Share on other sites

Sounds to me like it's working as intended.

Basically what happens is that it sets (like TweenLite.set) the values you specify as "from", and then animates them to your specified "to values".

 

Edit:

Why don't you just hide it via css and use a simple TweenLite.to if I may ask?

Link to comment
Share on other sites

Hi Chaoti, and welcome to the GreenSock forums. 

 

It would really help to see a reduced CodePen that we can look at that shows the results with a clear explanation of the desired results. More info on how to do that here: http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

In most cases the from or start values in a from() or fromTo() tween are expected to render immediately (despite where the tweens are scheduled to run in a timeline).

 

Take a simple example of 2 elements fading in from opacity:0 in sequence.

tl.from("#redBox", 1, {opacity:0})
  .from("#blueBox", 1, {opacity:0})

Most people would want the blueBox hidden until it is time for it to start fading in, which is what the default behavior of immediateRender:true accomplishes.

 

Demo: http://codepen.io/GreenSock/pen/FbdEo

 

In the off chance that you don't want the opacity of blueBox set to 0 until the tween begins you can set immediateRender:false as shown below

tl.from("#redBox", 3, {opacity:0})
  .from("#blueBox", 3, {opacity:0, immediateRender:false})

Demo: http://codepen.io/GreenSock/pen/BKngq?editors=001

 

 

Side note.

 

at times when you are scheduling multiple tweens in a timeline to affect the same properties of the same object in from tweens, you will find that setting immediateRender:false can come in real handy. Otherwise multiple tweens will be setting and recording the same values of the same properties at the same time. Again, the default behavior of immediateRender:true is usually what folks want. 

 

Side note 2:

 

I would suggest you don't use add() for adding single tweens. The from() and fromTo() methods of TimelineLite/Max can save a lot of unnecessary typing. See my examples and the docs for more info.

 

Again, if you still are getting unwanted or unexpected results, please provide a demo that we can test and edit. 

 

Thanks!

  • Like 2
Link to comment
Share on other sites

Hello chaoti, and Welcome to the GreenSock Forums!

 

Of course the Mighty Carl beat me too it again! :)

 

What you can do is try and add immediateRender: false to your from(), fromTo(), and staggerFrom(), and staggerFromTo() tweens. from tweens render immediately.

 

Taken from TweenLite Docs and the TweenMax Docs:

 

immediateRender : Boolean - Normally when you create a tween, it begins rendering on the very next frame (update cycle) unless you specify a delay. However, if you prefer to force the tween to render immediately when it is created, set immediateRender to true. Or to prevent a from() from rendering immediately, set immediateRender to false. By default, from() tweens set immediateRender to true.

 

So your code would look like this:

settings.startOpacity = 0;

tl.add(
	TweenLite.fromTo(target,s,{
		opacity:settings.startOpacity,
	},
	{
	        delay:delay,
		opacity:settings.endOpacity,
                immediateRender: false // add this 
	})
);

Does this help?

  • Like 1
Link to comment
Share on other sites

This was exactly what I wanted, I must have missed it in the documentation. Thank you very much!

 

Thank you Carl and Jonathan.

 

Sebh - it's a bit more complex than that, The whole thing I have setup would take forever to explain, but basically I'm chaining the creation of the tweenlites. However when I would chain 3 or so together the third 'fromTo' would be rendered until the timeline fired the others before it. SO by setting the rendering to false on the proceeding ones I am addressing the very issue I needed to resolve.

  • Like 1
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...