Jump to content
GreenSock

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

Make element visible before staggerFrom starts?

Recommended Posts

Hello,

I've just begun using Greensock (and it looks great already, thanks!), and I've already programmed myself into a corner...

 

tl.staggerFrom(".product_div", 0.5, {top:"1000px", ease:Power2.easeInOut}, 0.1);


Just a normal staggerFrom, right? The ".product_div"'s are just a bunch of boxes I'd like to animate 'into place' from the bottom of the screen.The thing is, the elements animated are visible at their 'final' position (floating left), and it is quite normal that I will see them for a microsecond at their 'end' position before the animation starts, but... I'd like to make them invisible before it starts.

That would mean that the elements would have to be invisible from the get-go (in the css), and be made visible just after timelineMax has moved it into its 'animation start' position, but I can't find any feasible way to make this happen in the documentation.

Perhaps I should be going at this the other way around, but thanks for any advice (I'm also curious for future reference).

Thanks, best,

Josef (aka ThePromenader)

Link to comment
Share on other sites

Hello ThePromenader, and welcome to the GreenSock Forum!

 

Try adding immediateRender:false to your staggerFrom() tween:

tl.staggerFrom(".product_div", 0.5, {top:"1000px", immediateRender:false, ease:Power2.easeInOut}, 0.1);

Taken from TweenLite 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.

 

I hope this helps! :)

Link to comment
Share on other sites

Welcome again!

 

Thanks for jumping in, Jonathan. I think what he is referring to is the fact that his CSS is positioning the elements for a brief moment before any JavaScript or timeline code gets to execute. 

 

Here is an example of a timeline with a staggerFrom() tween. To simulate a long page load or some amount of delay between the DOM rendering and the GSAP code executing I'm using a delayedCall() to delay the addition of the staggerFrom() tween

 

var tl = new TimelineLite()


function init() {
  tl.staggerFrom(".box", 1, {left:550}, 0.6)  
}


//wait 1 second before adding tweens to the timeline
TweenLite.delayedCall(1, init)

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

 

That example shows the boxes in their "end" position for 1 second before the from() tweens get to set the start / from values.

 

--

 

To fix this their are 2 steps

 

1 - set the visibility of the elements to hidden in the css

.box {visibility:hidden}

2 - as soon as the js executes flip that over to visible with a set()

function init() {
  //when js executes make boxes visible
  tl.set(".box", {visibility:"visible"})
  tl.staggerFrom(".box", 1, {left:550}, 0.6)  
}

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

  • Like 1
Link to comment
Share on other sites

Okay, I get it! Without the delay, timelineMax will execute the commands immediately (make visible, calculate 'start' position and move elements there, animate back into place), but with the delay, it will calculate the element positions but won't start execution until after this is done... brilliant!

Thanks so much for your replies; already the Greensock operations 'context' is becoming clearer to me.

Cheers!

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