Webflow Interaction and Animation

Question 1

What are the two types of Triggers?

Answer 1

1. Element Triggers: Triggers an animation when we interact with an element (e.g. hover or click)
2. Page Triggers: Triggers an animation when there’s a change in the page state (e.g. when the page is loaded)

Question 2

What are the five-element triggers?

Answer 2

1. Mouse click (tap)
2. Mouse hover
3. Mouse move over element (continuous)
4. Scroll into view
5. While scrolling in view (continuous)

Question 3

What are the steps to add after-effects animation into Webflow?

Answer 3

1. Create animation in After Effects
2. Export using Bodymovin
3. Add to Webflow
4. Control the animation (Page load, Mouse move in viewport, Page scrolled, While page is scrolling)

Question 4

What is Bodymovin?

Answer 4

A free extension that lets us export After Effects compositions as JSON files, so we can embed them in websites, and add them to apps.

Question 5

What is a Trigger?

Answer 5

A trigger — whether it’s clicking, scrolling, hovering, moving the mouse, loading the page — executes an animation (what happens on that trigger).