ScrollTrigger with Lottie Animation and MatchMedia

[Peter Moore]

I'm using GSAP MatchMedia to load Lottie animations tied to scroll position (using ScrollTrigger). There's one Lottie animation for portrait orientation and another for landscape orientation. MatchMedia is working on page load, showing the correct animation depending on screen orientation, but try as I might I cannot get it to work when the orientation changes. 

 

How do I essentially reset everything when the page orientation changes and load in place the correct animation?

 

Hopefully my codepen makes more sense than this post!

 

Many thanks in advance! 

See the Pen abjJowV by lejazz (@lejazz) on CodePen

[GreenSock]

Thanks for providing such a nice minimal demo, @Peter Moore! I wish all community members were as thoughtful. 

 

I just updated the LottieScrollTrigger() function to be context-aware so that it kills the animation/ScrollTrigger when the MatchMedia context gets reverted, so all you should need to do is update that one function: 

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

 

Does that work the way you expected? 

[Peter Moore]

Thank you so much. That works exactly as expected.

I suspect I may never have got there!

 

Thank you again for the help. Amazing!

[GreenSock]

Yay! Happy to help. 🙌