Two sticky interactions not working properly

Design help Animations & Interactions
1

Hey everyone!

I’ve been putting together this site, and I can’t get the sticky hero interaction to work properly for the life of me. It’s been like 2 nights and I’m feeling pretty defeated.

1 - If you take a look at my site you can see that I have a Lottie file that should play on scroll. It seems like it’s all set up properly and the interaction works some, but it doesn’t start the animation from frame 1. When I test a live preview of the interaction it stops at 48%. And won’t let me scroll up to 0 (frame 1). Am I missing something? Ideally, it gets to 99 and then scrolls to the next section. See the old published version at donteverletgo.com to see how it should work. (this is an old version with separate assets for type and door that I had to nix. for scaling issues)

2 - The next issue is that my menu is an accordion-style menu. Right now they all work pretty correctly. The only one that is not working as it should is the gallery at the bottom. That should be closed on page load, but it seems like the way the accordion is set up I need to turn off overflow visibility on my ‘Accordion item content’ block. But then sticky does not like the overflow off. LOL so it seems like these two interactions are just working against each other.

2.5 - Lastly, after the gallery, I should start to see the footer with logos, but right now it stops just before that. Im not sure why. :man_shrugging:

Im hoping you guys can help me out. I’m heading to a festival with my film and I need to get this site working this week. :crossed_fingers:

Here is my public share link: https://preview.webflow.com/preview/delg?utm_medium=preview_link&utm_source=designer&utm_content=delg&preview=41acfeb2f8ff39854bb36aa4079624b2&workflow=preview

2

I’m going to be removing the sticky element (for now) and just have the lottie play in full on page load. I was hoping it could be more interactive but I’ll settle for something that works for the time being.

3

Any way we can still see a copy of your page to try to solve the challenge?

4

@vincent does the public share link above still work? I haven’t touched it since last night. Any help would be amazing.

5

For 1.

THIS is important

CleanShot 2022-06-07 at 22.12.44
CleanShot 2022-06-07 at 22.12.44246×533 30.9 KB

Your lottie anim is already way up in the page, and its animation is supposed to start in a state that the animation will never be (entering the viewport).

An interaction trigger DOESN’T HAVE TO BE the element that you’re animating. For instance, here, you could create a DIV that’s invisible and that’s only used to control the playback of your lottie. I personally use dummy elements as triggers for 90% of my Interactions.

But you could also define the limits differently. Can you try to find a solution that’s working, now that you have these infos?

I’ll have a look on the rest tomorrow, ping me again, sorry I can’t do it tonight.

6

Thank you @vincent ! I’ll take a look now. Appreciate the tips!
I was using a div as a controller previously, but when I set up this new logo asset I couldn’t remember how I set it up and gave up. Glad to know that’s where I should head.

Thank you!

7

I solved #1! :man_dancing:

For #2 - For now I just did a vertical scrolling gallery. This is ok for now. I do like having large images that don’t move vertically but perhaps I can do a carousel if a horizontal scroll does not work.