Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
niklasinla

TimelineLite - select elements to animate

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

Hii!

I'm confused.

I'm creating:

var tl = new TimelineLite({paused:true});

Then in dom ready I have this:

test1 = document.getElementById("testdiv1");
test2 = document.getElementById("testdiv2");

tl.from(test1, 1, {top:"500px", autoAlpha:0})
.from(test2, 1, {top:"300px", autoAlpha:0})

Then in window.onload:

tl.play();
The above works great.
 
 
BUT - this in dom ready doesn't work (it just fails silently):
tl.from("#testdiv1", 1, {top:"500px", autoAlpha:0})
.from("#testdiv2", 1, {top:"300px", autoAlpha:0})

What am I doing wrong here???

Best, Niklas

 

Link to comment
Share on other sites

Hello niklasinla, and Welcome to the GreenSock forum!

 

I believe you might need to use immediateRender: false on your from() tweens:

 

Here is a video by the Mighty Carl on understanding immediateRender and from() tweens:

 

 

NOTE: By default, immediateRender is true in from() tweens, meaning that they immediately render their starting state regardless of any delay that is specified. You can override this behavior by passing immediateRender:false in the vars parameter so that it will wait to render until the tween actually begins.

 

Also to better help you a codepen demo example so we can see your code in context and in a live environment.

 

 

:)

  • Like 2
Link to comment
Share on other sites

Thanks for your answer Jonathan.
I'm not sure if you understood me.
When the timeline fail I mean that the animations doesn't work at all.
I can't really see how immediateRender: false would change that.
I did try it though but it didn't help at all which I expected it not to...

Niklas

Link to comment
Share on other sites

Make sure you are using a recent version of GSAP.

Link to comment
Share on other sites

I understood your question. That is why i advised to create codepen example so we can better help you!

 

Also you have paused:true in your TimelineLite() instance but you are not using tl.play()

tl.play(); /* make sure to play since TimelineLite is paused */

x

See the Pen zrOVmE by jonathan (@jonathan) on CodePen

 

Also define your test1 and test2 variables with var

var tl = new TimelineLite({paused:true});

var test1 = document.getElementById("testdiv1"); /* define var */
var test2 = document.getElementById("testdiv2"); /* define var */

tl
.from(test1, 1, {top:"500px", autoAlpha:0})
.from(test2, 1, {top:"300px", autoAlpha:0})
.play(); /* make sure to play since paused */

x

I created a codepen for you, but in the future please take the time to provide a codepen so we can help you better

 

:)

Link to comment
Share on other sites

Ah - ok.
Well - I understand immediateRender.
My problem is this:
Below.
The top code works - bottom one doesn't.
I'll try to create a CodePen later...

I'm using the latest TweenMax code from the CDN.
 

test1 = document.getElementById("testdiv1");
test2 = document.getElementById("testdiv2");
 
tl.from(test1, 1, {top:"500px", autoAlpha:0})
.from(test2, 1, {top:"300px", autoAlpha:0})

 

 

tl.from("#testdiv1", 1, {top:"500px", autoAlpha:0})
.from("#testdiv2", 1, {top:"300px", autoAlpha:0})

 

 

Niklas

Link to comment
Share on other sites

Thanks Pablo.
I will have to look into this.
I'm using fontfaceobserver in window.onload for detecting when fonts are ready and then starting animations and also vanillajs for dom ready event...
My guess is that it has something to do with this.
Will try to create a Code Pen later...

Niklas

Link to comment
Share on other sites

My example from above is working in both chrome and firefox

 

See the Pen zrOVmE by jonathan (@jonathan) on CodePen

 

You just weren't calling play() since you had paused:true in your TimelineLite constructor

Link to comment
Share on other sites

Hmmm - this is odd.
Coming back to this next day & all of a sudden it all works.
Haven't changed anything in my code...
Anyway thanks everyone for the inputs...

Niklas

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.
×