Staggering within timeline with .to() keyframes

[ryan_brwn]

Hi all!

 

I have curious question. Does anybody know why the code below would work perfectly fine on Codepen and also work on my local machine when I'm loading GSAP via CDN, BUT when I load GSAP locally via a copy gsap.min.js the keyframes doen't seem to acknowledge the staggers (I have a screen recording attached below).
 

let tl = gsap.timeline();

tl.to( document.querySelectorAll('.box'), {
	keyframes: [{
		alpha: .25,
		duration: .045
	}, {
		alpha: 1,
		duration: .045
	}, {
		alpha: .25,
		duration: .045
	}, {
		alpha: 1,
		duration: .045
	}, {
		alpha: .25,
		duration: 1,
		ease: Sine.easeIn
	}],
	stagger: .5
}, 2).to('.box-04', {
	rotate: 360,
	duration: 2,
	alpha: 1,
	ease: Expo.easeOut
}, '+=.5');

 

 

See the Pen f4c38c451e6454042c6f8c799c59d4bb by ryankbrown (@ryankbrown) on CodePen

[Cassie]

Heya!

 

Are you using the same version of GSAP for all of them?

[ryan_brwn]

I am! I'm using version 3.8.0 on the CDN and also locally!

[GreenSock]

That sounds very odd to me. Can you create a minimal demo and zip it and attach it here? It's super difficult to troubleshoot blind. Once we're able to reproduce it, I'm sure we'll be able to give you some solid advice. 

[ryan_brwn]

haha I'm having trouble reproducing the error in a minimal demo myself! Maybe I just need to try and see if any other parts of my code are interfering with gsap or something. I thought I'd post here to see if something similar had happened to anybody else.

 

Thanks for the replies!

[ryan_brwn]

I figured it out! I'm an idiot. My build process was somehow grabbing GSAP version 3.5.0 instead of updating it to 3.8.0 and it didn't occur to me to check the output.

 

Thank you all for the help!