Does anyone know how to replicate this load interaction?

Design help Animations & Interactions
1

Hello, my client loves this load interaction https://thegreenroomhomes.com/ Does anyone Know how to replicate it on Webflow please? If you can also replicate the little button at the bottom that would be great.

Here is my public share link: LINK
(how to access public share link)

2

Hey @Roxzfr

For the border animation, you can do it with Webflow animations. You have to create separate divs for each side of the rectangle so you can animate it separately. With the absolute positionning, you can place them correctly :slight_smile: You can change the origin of the 2D transform so the scale animation goes to the good side.

Here is an example : https://preview.webflow.com/preview/playground-jptrinh?utm_medium=preview_link&utm_source=designer&utm_content=playground-jptrinh&preview=47546c1b906497e77a2e02b81d8548a5&pageId=613c8f97a86828d6caa36d98&workflow=preview

As for the mouse button, I think it would be faster if you put a lottie animation (like this one MOuse Scroll Down on Lottiefiles. Free Lottie Animation)

Hope it helps !

3

Thank you Jean-Philippe,

That is really helpful and appreciated. I will take a look at the example and certainly give it a try,

Have a great weekend
Roxzanne