Non-completing tween

[robbue 5 Likes (Newbie)]

I'm making this thing:

See the Pen 645dff0dd2be4811590671525e340493 by robbue (@robbue) on CodePen

 

But I'm having some problems with the tweens not being completed, resulting in this (MBP Retina Chrome 34):

 

Why isn't every tween completed? It's stops before reaching a value of 1/0. Is there a better way to do this?

 

 

[jamiejefferson 1,185 Likes (Superhero)]

Looks like the rotation is interfering with the style parsing for the className tween. If you separate the className to its own tween for ".square-3 .square-inner, .square-7 .square-inner, .square-11 .square-inner" then the rotation is kept separate and works as expected:

.to(..., transitionTime, { className: '+=shadow', ease: easeEffect }, "tl2")
.to(..., transitionTime, { rotationY: -degrees, ease: easeEffect }, "tl2")

Also your screenshots aren't accessible, but I'm assuming this is what you were talking about.

[robbue 5 Likes (Newbie)]

Thanks jamiejefferson The class was a CSS animation, but I'm now animating it with GSAP and it works fine. Also experienced some cracks at some resolutions, fixed it with a width: 101% hack and some other stuff.

 

Updated the post with image for future reference.