Play full Lottie animation at certain scroll position

Design help Animations & Interactions
1

Hi all,

I’m trying to set up a Logo lottie which animates fully at e.g. 5% of the page and then when I scroll back up it animates back. I don’t want to use animate on scroll functionality which I’ve already done (website: https://www.trireme.com)

I’m trying to achieve the same effect as this website: https://www.flowdesk.co - with logo animating between letter F and full name at certain scroll level.

Does anyone know how to achieve this?

2

Best to look into GSAP ScrollTrigger for this. The steps you’ll need to take are

Set up a timeline that is paused by default

Play the timeline, targeting your lottie element on scroll trigger ‘enter’
Reverse the timeline, on scroll trigger ‘onEnterBack’