Safari & Firefox page refresh & scroll mode not working

Lottie in Web
1

Hi there,

I’m creating a Next.js website which relies heavily on some Lottie animations being loaded when in viewport. I’m using the @lottiefiles/react-lottie-player in combination with the @lottiefiles/lottie-interactivity packages.

I have the following component that loads the content of a remote json file:

import {Player} from '@lottiefiles/react-lottie-player';
import {create} from '@lottiefiles/lottie-interactivity';
import {useState, useEffect} from 'react';
import styles from './Framework.module.scss';

const Framework = ({
	blok: {
		animation: {
			filename
		}
	}
}: {
	blok: FrameworkStoryblok;
}) => {
	const [lottie, setLottie] = useState();
	const [lottieData, setLottieData] = useState();

	/**
	 * Get Lottie data
	 */
	useEffect(() => {
		const loadData = async () => {
			const response = await fetch(filename)
				.then(res => res.json())
				.catch(err => {
					throw err;
				});

			setLottieData(response);
		}

		loadData();
	}, [filename]);

	return (
		<section className={styles.framework}>
			{lottieData && (
				<section className={styles.wrap}>
					<div className={styles.ratiobox}>
						<Player
							src={lottieData}
							className={styles.animation}
							keepLastFrame={true}
							lottieRef={instance => setLottie(instance)}
							onEvent={event => {
								if (event === 'load') {
									create({
										mode: 'scroll',
										player: lottie,
										actions: [
											{
												visibility: [0, 1],
												type: 'playOnce',
												frames: [
													lottieData?.markers?.[0]?.tm || 0,
													lottieData?.markers?.[1]?.tm || 60
												]
											}
										]
									});
								}
							}}
						/>
					</div>
				</section>
			)}
		</section>
	);
};

export default Framework;

This actually works perfectly! When the page is loaded and you scroll down (where this component is located) the animation plays once and stops at the marker frame. All good.

However the problem lies in the fact how browsers handle scroll positions after refreshing the page;
Safari & Firefox seems to handle this differently, they both immediately jump to the last scroll position and therefore not triggering the scroll mode at all…

Chrome seems to smooth scroll to the last position and therefore does play the animation correctly?
Is there a workaround or (easy) fix for this that anyone knows off?

Many thanks!