Streaming live at 10am (PST)

Help with this little interaction

#1

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
#2

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
#3

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.

#4

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
#5

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
#6

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

1 Like