Streaming live at 10am (PST)

Help with this little interaction

Hi guys, I’m new in webflow I made a website and I want to make this animation to my images (the diamond one) I want to know how I can make animate the blue square left to right (just the square not the diamonds) … Thanks guys


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

1 Like

Hello @Chrislandaeta

You want to animate the square on scroll right? You can set a scroll into view animation.

See here > https://expand-square-on-scroll.webflow.io/

Clone and explore here > https://webflow.com/website/Expand-square-on-scroll

Feel free to reach out if you need some help :webflow_heart:

1 Like

Thanks a lot Piter! thats what i was looking for. i have a question, in the right colum how you make it static? because in my artwork the right colum with the text move with the square when it expands.

You might want to separate those elements in separate divs.

1 Div for the Square and another div for your text. That way, the text won’t be affected by the animation applied only to the div.

1 Like

yes i found the error, i was grouping all the container in the interaction, so i change it to only the square block. Thanks a lot guys :smiley:

2 Likes

I’m Glad to help! In case you need anything else, feel free to get in touch.

1 Like