This is a quick demo for using the <lottie-player> web component to couple animations with scrolling effects.

This demo utilizes the seek() method of the web component to set and control the frame of the animation based on the scroll position.

See the player component project's Github page for all the properties and methods available on the component.

Praesent egestas in neque sed placerat. Cras turpis diam, vestibulum id turpis vel, consequat ultricies nunc. Donec consequat fermentum finibus. Sed pharetra pellentesque lacus, vel tempus turpis finibus quis. In vel blandit augue. Aenean in tortor vitae velit elementum lacinia et vel est. Aliquam egestas massa nibh, vitae congue purus viverra quis. Donec sed ex sit amet tellus convallis gravida. Nunc blandit congue orci. Suspendisse pellentesque nisi eu tempus scelerisque. Etiam dignissim mi libero, sit amet volutpat eros efficitur id. Aliquam finibus velit mauris, a blandit ligula malesuada a. Suspendisse euismod, massa id finibus ultrices, dui lectus placerat diam, ac laoreet nunc augue eu enim.

Fusce eget diam sit amet est tincidunt mollis. Praesent dolor ipsum, mattis non erat ac, porttitor scelerisque risus. Nam sit amet enim ut ipsum sollicitudin tincidunt. Fusce ut turpis a augue venenatis lacinia. Nulla vestibulum aliquam metus vel tempus. Mauris iaculis tempus odio sit amet mollis. Fusce iaculis bibendum libero. Sed elementum nibh non ipsum consequat, vitae convallis lacus suscipit. Nullam dictum metus quis lectus consequat posuere. Pellentesque vitae tincidunt ipsum. Suspendisse ut iaculis urna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo nulla leo, sit amet vulputate ipsum dignissim non. Suspendisse ligula mi, ullamcorper at mi eu, mollis dapibus lectus. Nunc vel urna lorem. Curabitur facilisis, ipsum id interdum iaculis, risus eros laoreet est, sed scelerisque sapien massa laoreet tortor. In non pharetra mi. Proin accumsan orci sit amet nunc rhoncus, eu condimentum justo aliquet. Vestibulum sit amet aliquet eros. Morbi lobortis nibh quis augue maximus, sit amet finibus turpis mattis. Fusce rhoncus sit amet arcu vel commodo. Aliquam sodales vulputate maximus. Nullam vulputate maximus dolor, ac gravida tortor lacinia sit amet. Sed eget pellentesque enim, eu scelerisque sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo nulla leo, sit amet vulputate ipsum dignissim non. Suspendisse ligula mi, ullamcorper at mi eu, mollis dapibus lectus. Nunc vel urna lorem. Curabitur facilisis, ipsum id interdum iaculis, risus eros laoreet est, sed scelerisque sapien massa laoreet tortor. In non pharetra mi. Proin accumsan orci sit amet nunc rhoncus, eu condimentum justo aliquet. Vestibulum sit amet aliquet eros. Morbi lobortis nibh quis augue maximus, sit amet finibus turpis mattis. Fusce rhoncus sit amet arcu vel commodo. Aliquam sodales vulputate maximus. Nullam vulputate maximus dolor, ac gravida tortor lacinia sit amet. Sed eget pellentesque enim, eu scelerisque sem.