Sticky Positioning - Lottie Animation

Design help General
1

Hi,
I have a Lottie integration on my home page and i’m having trouble making it sticky in the first section. Your help would be greatly appreciated.
Thanks,
Matt

Here is my site Read-Only: LINK

2

Where are you trying to stick it? It looks like you’ve got

  1. menu
  2. hero and CTA
  3. lottie
  4. page

At the moment the menu sticks fine, and the hero and cta should go under it but the lottie is in the way.
Check out the z index to see what layers you’ve got.

I also changed the hero section to height = auto

3

I want the lottie to be sticky, and stay in the middle of the viewport as the user scrolls down the hero section (which is 2000px high)

4

So I think you want something like this:

The Lottie then scrolls up when the list of companies scrolls into view.

6

Hi @Jonathan_Holden,
Thank you very much for your help. Yes that is correct, however the lottie would be pushed off the screen when the ‘what we do’ section appears.
Do you know why the sticky positioning isn’t working?
Thanks

7

Sorry, I’ve had a look, but can’t work it out.

8

@MatthewSpiegelhalter that was hard to find. But here we go:

  • select your “hero-section”, set “overflow” to “visible” !!! (I was confused, why sticky isn’t working and it took a while to find the mistake)
  • put your “lottie” in a div, name it “sticky”
  • set “sticky” position to “sticky” and “top” to “0”

Enjoy it!

1 Like
9

@Matthias Thanks SO much!!!

10

Hi great topic,
Im trying to achieve the same effect but without full screen animation,
I have followed the instruction and cheatsheet but the animation doesnt stick

Does anyone know if there is any literature for this,

here is my link
https://preview.webflow.com/preview/k-an?utm_medium=preview_link&utm_source=designer&utm_content=k-an&preview=895c4fe39388cebbcd5f87b4dfc34b88&workflow=preview