Video: How to Use Animations in Webflow

During this tutorial, Designlab mentor Kieran Black explains how to create and use animations in Webflow.

Emily Ho
Emily Ho
|
Jun 17, 2020
|
2
Min Read
Share

During this tutorial, Designlab mentor Kieran Black explains how to create and use animations in Webflow.

Kieran uses his own portfolio, which he built in Webflow, as an example.

Here are some timings in case you want to skip ahead:

  • 0:00 Webinar Intro
  • 1:30 Intro to animations in Webflow through Kieran's portfolio
  • 8:30 Creating an interaction in Webflow
  • 15:00 Pressed in Webflow
  • 18:00 Scroll animations
  • 24:00 Showcase in Webflow
  • 32:30 After Effects Lottie files

Here are some of the questions answered during the Q & A:

  • Do you have to create new effects each time?
  • Is there a way to import animations from After Effects?
  • Is it possible to export CSS code from the Webflow design?
  • What are the standards for using other people's animations?

Ready to continue learning about animations in UX design? Explore our UX Academy program.

Launch a career in ux design with our top-rated program

Top Designers Use Data.

Gain confidence using product data to design better, justify design decisions, and win stakeholders. 6-week course for experienced UX designers.

Launch a career in ux design with our top-rated program

Top Designers Use Data.

Gain confidence using product data to design better, justify design decisions, and win stakeholders. 6-week course for experienced UX designers.