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
Hey Guy, sounds like this is just interactions, check out the tutorials here.
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?
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!
Thanks @joshuafry!
Webflow team, any chance we can have a tutorial on this one?
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
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
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
