Different neon arrows in blue, yellow and magenta
How to best learn to create interactions and animations with Webflow
Webflow's interactions and animations features are pretty neat! You can set up both simple as well as more complicated animations and text/image transitions without writing any code. But how do you actually master Webflow's transitions panel? What courses and resources do you look at and go through first? What's the most efficient way to learn more advanced techniques? Well, there are actually quite a few good resources available online, so I in this article I'm providing you with a bit of a roadmap of what to learn, when to learn it as well as additional tips on how to practise your newly developed skills. Haven't got a Webflow account yet? You can sign up for an account here (yep, that's an affiliate link). All done? Now, let's get started!
First things first though: before you start dabbling with animations in Webflow you should have a good grasp of how to use Webflow in general. You should know how to structure a site, create new pages, add content etc. – so go onto the Webflow University site, make your way through some of the beginner tutorials, and experiment with what you have learned. Only when you know and can apply the basics, shift your focus to transitions and animations. Now that we've got that out of the way, let's start with our Webflow transitions and interactions curriculum. I have separated this lesson plan into three different sections called "Learn" (learn the basics), "Practice" (practice your skills), and "Go live" (basically practice some more, but publish your results and work together with others). But now let's get started...
Your first destination should be Webflow's own university site. Their "Interactions and Animations" course is a series of 14 short videos (roughly 1 hour) that teach you the very basics. You can also quickly access single videos by going into their dedicated interactions section.
This is a website also created by Webflow which is solely dedicated to teaching users about interactions. Beware, the site was created before transitions 2.0 was a thing, so the UI elements have changed a bit. Nevertheless I think it's still a good resource to learn a thing or two about how to get certain transitions to work. What's especially good about this site that there are live examples available that you can try out and are then shown how the particular effect was achieved.
Nelson is an Webflow employee and a pro when it comes to Webflow as a tool for designing websites. On his channel he publishes a variety of different Webflow tutorials, some of which are focussing on cool effects and animations. A nice one for beginners who haven't got heaps of experience with interactions is his recorded live stream called "How to Webflow: Interactions and Animations for Beginners". Definitely check this one out.
After you've taught yourself the basics with some of the resources mentioned above, it's time to put your skills to the test (and learn some more in the process). One great way to do this is to access the Webflow Showcase which has a variety of different projects built in Webflow available. You can easily look for cloneable sites in the Webflow Showcase and open them as read-only sites in Webflow. This allows you to see exactly how a particular feature was created. In our case here you'd look at a cool animation and inspect Webflow's interaction panel. You could then re-create the same effect on your own practise site.
There are lots of amazing websites online – not all of them have been built with Webflow though. To practise your skills you could actually try to recreate a particular transition you have seen on another website. It's probably best to first look and play around with transitions made within Webflow before attempting to build some that you cannot easily dissect. Well, actually you can dissect them, however you will need some coding knowledge and will need to know your way around Google's Developer tools. Either way: stretch yourself and try to re-create transitions you discovered online. To download assets like photos or to check the size of a particular typeface, you can use a little Chrome extension called CSS Peeper.
This might sound strange, but I think it's actually not a bad idea. If you've got quite a good grasp of transitions and animations by now, why not help some people on different Webflow Facebook groups or even the official Webflow Forum to debug their animation issues? You can take these little tasks as quick challenges for yourself to test your knowledge. Oftentimes you might learn a few things by trying to fix a problem you might not have come across before. And last but not least you help another member of the Webflow community out! Depending on how much time they might have already spent to solve their issue you might have just saved their day! That's what I call a win-win situation!
You've done lots of learning, now it's done to go out into the (online) world and publish some of your stuff. So, why not look for (hover) animations (or any other kind of transition/animation) you like online and recreate it online. Do this every day for 30 days and publish your finished pieces online. You could create a little video or gif animation of your interaction and upload it to Instagram or Twitter. You could also start a new Webflow project to which you add each of your daily transitions and make the file cloneable for all other Webflow users to enjoy and re-use. The opportunities are endless!
You know a thing or two about animations? Why not teach your skills on your own YouTube channel? Record a video in which you show other Webflow users how to create a particular transition and provide a link to your Webflow project in the notes. A great tool for screen recording is Loom. You can either simply record your screen with all your mouse movements or add your own face (via your in-built camera) as well. What about creating a little cheat sheet for Webflow transitions and animations that people can download for free on your website? All this reinforces your own skills and helps others in the process. Not bad.
See a job post for a Webflow designer with rad transition and animation skills? Apply! Having done some (or all) of the things mentioned above you should have quite a body of work to show off to your potential client. By doing client work in this field you further solidify your skills and get paid for it at the same time – and who doesn't like the sound of that?
Want to go even further with animations? Learn how to integrate Lottie files into your Webflow projects. Lottie files are vector animations that you can create with a tool like Adobe After Effects. Want to learn more about Lottie animations? Great – I will be publishing a blog article all about Lottie animations: how to create them, and where to find useful resources online. Keep your eyes peeled!
That's it for this week! Got anything to add? Get in touch.
Haven't tried Webflow yet? You can sign up for an account here (yep, that's an affiliate link).
Fill out the form below and I'll be in touch with you usually within 48 hours. You can also say hi via email.
