Dynamically fetch and play animation's last frame

Automattic · Sep 19, 2022 · f61ab8a · f61ab8a
1 parent 9fe2474
commit f61ab8a
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/client/blocks/app-banner/index.jsx b/client/blocks/app-banner/index.jsx
@@ -255,18 +255,20 @@ export class AppBanner extends Component {
 
 function BannerIcon( { icon } ) {
 	useEffect( () => {
+		const reducedMotion = window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches;
+
 		const animation = lottie.loadAnimation( {
 			container: document.querySelector( '.app-banner__icon' ),
 			renderer: 'svg',
 			loop: false,
-			autoplay: true,
+			autoplay: ! reducedMotion,
 			path: icon,
 		} );
 
-		const reducedMotion = window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches;
-
 		if ( reducedMotion ) {
-			animation.goToAndStop( 145, true );
+			animation.addEventListener( 'config_ready', () => {
+				animation.goToAndPlay( animation.totalFrames, true );
+			} );
 		}
 
 		return () => animation.destroy();