Trying to create a sticky hero animation on scroll with JSON

Design help Animations & Interactions
1

I am trying to achieve a hero section that cover entire viewport and contains a lottie animation. I want that animation to stick and play only when user starts to scroll.
I managed to make it play but it never sticks. I am also planning to have text overlays on the right side to animate on the right side of the viewport as user scrolls. Pls dont mind the text its a dummy.
Something like this:

Slice 1
Slice 11440×911 63.8 KB

But for now i want to achieve the sticky part and animate it while user scrolls.

Anyone who can help me with this? I m getting into webflow after years of gap and i did 21 days Figma to webflow course from the university back in the day, so things are quite blurry but i am learning as i go and play with it again. TIA!

Here is my public share link: [LINK][1]
([how to access public share link][2])

[1]Webflow - UD Portfolio

2

Hi there!

Creating a scroll-based Lottie animation in Webflow is straightforward using the Interactions panel. Here’s how to set it up:

  1. Select your Lottie animation element on the canvas
  2. Go to the Interactions panel and open the Element trigger menu
  3. Choose “While scrolling in view” as your trigger
  4. Under On scroll, select “Play Scroll Animation” from the Action menu
  5. Click the plus sign next to Scroll Animations and choose Lottie
  6. Set the animation to progress from 0% to 100% as you scroll

You can preview your work using live preview mode to see how the animation progresses with scrolling.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

well like i had mentioned in my post above, i was able to do all the above points. i need the json to be sticky and not scroll down until the animation is over