Jump to content
Search Community

help with simple stagger

retropunk test
Moderator Tag

Go to solution Solved by Diaco,

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

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 ?editors=001 by SnapToPixels (@SnapToPixels) on CodePen

Link to comment
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 comment
Share on other sites

  • Solution

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 comment
Share on other sites

  • 3 months later...

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