Streaming live at 10am (PST)

Nice object animations


#1

Hi,
In the webflow cms preview LP and also in the new designer page over webflow site in the section 'Design animations and interactions' there's a nice animation of objects flying out of a certain area when you're using the hover example, i really want to know how it is done, is it an animated gif loaded in the background?

Thanks in advance for your answers,
Guy


#2

Hey Guy, sounds like this is just interactions, check out the tutorials here.


#3

thanks @joshuafry , i know how to handle interactions, but there are so many items there(ovals, rectangles, squares) flying and rotating and fading and every time from a different direction and angle, i don't think it made with the interaction feature, do you have a specific example?


#4

Woah I just looked at what you actually referenced and it is crazy, but from the look of it it really is all interactions. Each of the 'particles' is a styled div and in response the the hover they are triggered to fly and twist and fade etc. Pretty impressive. Not a quick job, but certainly easier with Webflow than it would be to code from scratch!


#5

Thanks @joshuafry!
Webflow team, any chance we can have a tutorial on this one?


#6

Incidentally, (and I realise this looks terrible and is nowhere near as impressive) I did start an experiment at one point that uses a similar method. The stick man is made up of styled divs and I was planning to animate him in a bunch of different ways but I only got as far as waving! https://preview.webflow.com/preview/experimen?preview=91ee8057e6ff8307f8dbc33f6f469615


#7

OK I actually just got a bit too into this and made something that basically (I presume) uses the same techniques. It's still not as awesome as I couldn't afford to waste too much time, but you can use this preview link to look at the interactions I used to achieve it.

(Hover over the cloud!)

https://preview.webflow.com/preview/rainingallday?preview=3885b41650a48ab9e069cc0fd4138a27


#8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.