Streaming live at 10am (PST)

Does anyone know how to do this animation?


#1

Hello everyone:) I’m looking to create a navigator with similar animation like this http://simsim.fouroom.co/#Home

Is there a simple way of doing it in Webflow with mouse move in viewport? And if not, how is it made?


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


#2

We could probably reverse-engineer the IX2 from the bottom of this file as it’s done in Webflow. http://simsim.fouroom.co/js/simsim.js


#3

Alright, would you do that?:slight_smile: I’m totally new to Webflow and know nothing about code and reverse-engineering.


#4

Hi @emanuellindqvist,

No need to code here, beauty of webflow (I guess :crazy_face:).
I manage to reproduce a very similar effect just using interaction with while mouse is over.

I added a few screenshots to illustrate a bit more but if you go through interactions tutorials in the webflow university and feel comfortable with it you will already be more than half way.

Reverse engineering is just starting from a solution and find what was the problem to solve.
So if you analyse this animation it is just 4 rectangles which change their proportion (%) on screen depending on where the mouse is.

The top part and bottom part adjust their height on the Y axis mouse position and the left and right of each part adjust their width on the X axis mouse position.

As for the fruit/veg illustration it correspond to the behaviour of a background image setup to repeat tile and size contained.

Sep-15-2018%2020-02-39

21

Hopefully it will make sense but to make a short answer to your question yes it is simple to do with Webflow :slight_smile:

Max


#5

Hi @Maximosaurus,

Thank you so much, very kind of you!
I will give your instructions a go tomorrow :slight_smile: