Animation doesn't recalculate properly after orientation change (mobile/ipad)

[Support Services]

A part of the animation (section-colored) doens't animate properly after switching from landscape mode to portrait mode.
I tried to kill it and restart it after an orientation change has been detected and even tried adding a delay so that the viewport heights can get recalculated again (i thought that might be the issue).

 

 

See the Pen mdPbmBy by kimberlygessner (@kimberlygessner) on CodePen

[ZachSaucier]

Hey Kimberly and welcome to the GreenSock forums.

 

It's not enough to just call .play(0) or .restart() after you kill a timeline. You should actually recreate the tweens inside of the timeline instead. A good way to do that is to use a function to create the timeline in the first place. Then after you kill it, you just call the function again. You can learn more about doing that in my article about animating efficiently.

 

Side notes:

• It's best to use .addEventListener() instead of setting the direct callback so that your function doesn't get overwritten by something else.
• You're using the old GSAP formatting. We highly recommend using the improved GSAP 3 formatting.
• You're directly animating the transform property. We don't recommend that. Instead we recommend animating the more specific transform attributes that GSAP offers like the y property. 
• You have hard coded position parameters for each tween in your timeline. While that's perfectly acceptable, it makes it harder to update and maintain. I highly recommend getting skilled with using relative offset position parameters so that it's easier to make adjustments with the timings of your animation. You can learn more about that in this post.

Altogether I'd set it up along the lines of this:

See the Pen WNwKmxQ?editors=0010 by GreenSock (@GreenSock) on CodePen