Adding data-lag onComplete ?

[darkgr33n]

Hi,

 

I have three columns that use stagger to animate into position using ScrollTrigger.batch. This is set to Once only.

I'd like to add a data-lag attribute to the columns, but if I add it in the code, it competes with the stagger animation resulting in a bit of a twitch.

 

The question is, once the animation is completed, is there a way to add the data-lag attribute to the columns so that we can then use the goodness of SmoothScroller but not have it affect the animation ?

 

Thanks! 

See the Pen bGQEoMz by darkgr33n (@darkgr33n) on CodePen

[GreenSock]

Yeah, that's because you're creating conflicting animations - both the data-lag AND you independent animation are trying to control the same property ("y"). You could just make your independent animation use yPercent instead -OR- you could dynamically add the lag effect in the onComplete of your animation (so it waits to apply it) using the effects() method. Personally, I favor option #1. 

[darkgr33n]

Thanks Jack!

 

I could see why it was conflicting, but didn't even consider using a different property which, of course, works beautifully.

 

Thanks again