Anna Sabatini, Quality Assurance Analyst, Webflow

1. Everything you wanted to
know about Webflow
Interactions

2. Hello everyone!
My name is Anna Sabatini.
I am a Quality Assurance Analyst here at Webflow.
I considering myself lucky to be part of this movement
because it changed once my life and I am very excited now
helping others to achieve their goals in life using no-code
tools.

3. Probable reasons of why you might not using interactions …yet
Fear
People tend to be afraid
of trying new things, go
out of the comfort zone.
Don’t know how
The learning curve
seems too steep, it might
look like a completely
new area.
Don’t see the value
Site can exist without
interactions
(animations), so why
spend time

4. Value Why do we want
animations on the project

5. Help User experience and solve the Design problems
Layout depth
● Reduce a cognitive
load
● Guide through the
workflow
Attract attention
● Build the content hierarchy
● Tell the story of your brand
with many micro-stories
Feedback effect
● Interface feels like a
conversation, users see the
response to their actions
● Confirming an action’s
effect

10. Purpose
Every animation in the
interface should have
purpose.
Accessibility
Don’t create obstacles
or block navigation
Performance
Most efficient properties:
- Position,
- Scale,
- Rotation,
- Opacity
Timing
It is important to find a
balance in the duration
Focus
Do not animate too many
object at once. Let user
focus on something one

11. Comfort zone The “magic” formula

12. Understand the workflow - build the relationship

16. Interact with any element of this class

17. Use not one, but List of actions

18. Affect all elements of the class

19. Use the same interaction with different trigger

20. Build really complex interactions

21. Start building interactions…

22. Useful resources
Animations, theory
Animation at Work, by Rachel Nabors
https://abookapart.com/products/animation-at-work
Patterns and Purpose, an Excerpt from
Animation at Work, by Rachel Nabors
https://alistapart.com/article/patterns-and-purpose/
Communicating Animation, by Rachel Nabors
https://alistapart.com/article/communicating-animation/
How Functional Animation Helps Improve User
Experience, by Nick Babich
https://www.smashingmagazine.com/2017/01/how-functional-
animation-helps-improve-user-experience/
Designing Interface Animation, by Val Head
https://rosenfeldmedia.com/books/designing-interface-
animation/
Webflow University
Interactions and Animations course
https://university.webflow.com/courses/interactions-and-
animations-course

23. You can find me here:
● Tweeter: https://twitter.com/anna_sabanna
● Webflow Profile: https://webflow.com/sabanna
● Instagram: https://www.instagram.com/sabanna.online/
● CodePen: https://codepen.io/sabanna
● Website: https://www.sabanna.online/
● Email: savanna.webflow@gmail.com

24. Exercise #1 - Change Navbar size on scroll

25. Exercise #2 - Color layer slides in and out when Page loads

26. Exercise #2-a - Use the Page load animation to the other page

27. Exercise #3 - Use the Page load animation to create a Lightbox reveal on Scroll animation