Jump to content
GreenSock

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

help with simple stagger

Go to solution Solved by Diaco,

Recommended Posts

my brain must be fried, I cant get this tween to work they way I want.

 

its a simple row of dots that tweens from left to right and fades out.

I need to be able to reposition the div holder and replay the same tween.

 

You'll see that in my codepen the tween works the first time around but when I uncomment the other lines the dots dont tween the same way as the first time...I can't see what I am doing wrong.

 

I need to step away and hope someone here can give me some clarity on where I am going wrong.

 

Thanks for the help everyone

Patrick

See the Pen 8f99a91424cd5d1ceebefafd8b6256b3 by SnapToPixels (@SnapToPixels) on CodePen

Link to post
Share on other sites

Hi Patrick,

 

Thanks for the codepen it was very helpful.

 

You simply stumbled into a common issue of from() instances.

 

What's happening is that the first part of your timeline takes the dots from autoAlpha:0 to it's current state. That current state is their initial opacity and visibility, those values are 1 and visible. Then the second part of the timeline does basically the same, takes the dots from autoAlpha: 0 to their current state. And the third part does the same. Turns out that when the second and third part of the timeline are instantiated the current state of the dots is autoAlpha:0, which was rendered by the first part of the timeline. So basically GSAP is animating the dots from autoAlpha:0 to autoAlpha:0, so nothing happens on the screen.

 

This is solved by using immediateRender:false in the config object of the second and third parts of the timeline or using staggerFromTo() instances in order to force the initial values of the dots. But in that case you'll also need the immediateRender:false in the from config object:

// move to 100 and retween dots from left to right
tl.set('#dotsHolder', {left:100, autoAlpha:1});
tl.staggerFrom(dotsAr, 1, {left:"-=75", autoAlpha:0, ease:Power1.easeInOut, immediateRender:false}, 0.25);
tl.to("#dotsHolder", 1, {autoAlpha:0, delay:1});
tl.set(dotsAr, {autoAlpha:1});
tl.to('#bg', 1, {backgroundColor:'green'});


// move to 150 and retween dots from left to right
tl.set('#dotsHolder', {left:150, autoAlpha:1});
tl.staggerFrom(dotsAr, 1, {left:"-=75", autoAlpha:0, ease:Power1.easeInOut, immediateRender:false}, 0.25);
tl.to("#dotsHolder", 1, {autoAlpha:0, delay:1});
tl.set(dotsAr, {autoAlpha:1});
tl.to('#bg', 1, {backgroundColor:'white'});

Happy Tweening!!

  • Like 6
Link to post
Share on other sites

Hi retropunk  :)

 

pls try this too :

function DotTween(){ return TweenMax.staggerTo(dotsAr,1,{x:0,autoAlpha:1},0.25); }
var tl = new TimelineMax({repeat:-1})

.set('#dotsHolder', {left:50, autoAlpha:1})
.set(dotsAr,{x:-75,autoAlpha:0}).add(DotTween())
.to("#dotsHolder", 1, {autoAlpha:0, delay:1})
.to('#bg', 1, {backgroundColor:'blue'})

.set('#dotsHolder', {left:100, autoAlpha:1})
.set(dotsAr,{x:-75,autoAlpha:0}).add(DotTween())
.to("#dotsHolder", 1, {autoAlpha:0, delay:1})
.to('#bg', 1, {backgroundColor:'green'})

.set('#dotsHolder', {left:150, autoAlpha:1})
.set(dotsAr,{x:-75,autoAlpha:0}).add(DotTween())
.to("#dotsHolder", 1, {autoAlpha:0, delay:1})
.to('#bg', 1, {backgroundColor:'white'})
  • Like 2
Link to post
Share on other sites

right, I haven't used immediateRender a lot.

I'm going to practice more now.

 

I will post a new version back soon. I might need one more explanation.

 

Thanks Rodrigo!

Link to post
Share on other sites

Thanks Diaco, thats exactly what I was trying to do.

 

I still haven't wrapped my head around immediateRender.

 

Thanks again guys...love this forum!

  • Like 1
Link to post
Share on other sites
  • 3 months later...

Hey Patrick, 

 

I know I'm a few months too late, but another user was having trouble with immediateRender so I decided to knock out a video.

Hope it helps!

 

  • Like 4
Link to post
Share on other sites

Thanks Carl I appreciate the video. It helps to see a simple example in practice. Not sure how I didn't see it before.

I finally got it. :)

Link to post
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.

×