Timeline animation API
education — wix wow — 2020
In 2020, my team developed the Timeline Animation API for Wix Code (Velo), enabling users to create animations via code. I knew this new capability could bring great value to Wix’s sites, and I was eager to make it accessible to my design colleagues. They were seeking more motion and interaction in sites, which Wix was lacking at the time, and I also understood that designing with code could be challenging for them. This led me to create an educational course on writing animations with the Timeline Animation API.I initiated and implemented this project independently while working as a product designer on the WOW team and being part of the Content Company and Design Guild at Wix.
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
WHAT
Product & content designer
WHERE
Wix WowTeam
WHEN
2019
educational project goals
SIMPLICITY & EFFICIENCY
I aimed to create a simple, basic, and efficient course focused on easily creating animations using the API. The course covered a few main topics: animation capabilities, the concept of a timeline and essential coding rules.
course highlights
TIMELINE BUILDING BLOCKS
Explaining the concept of a timeline, and how it functions within the API framework, Breaking down the elements that comprise an animation and outlining the fundamental building blocks necessary for animation creation (opacity, scale, position, rotate)
ANIMATION VALUES
Showcasing animation values as isolated syntax paired with a matching visual. This approach simplified learning by focusing on small code snippets linked directly to their visual results, rather than the entire API structure.
API STRUCTURE
Providing guidance on writing the API code, including practical examples and best practices for implementing animations effectively.
ANIMATIONS CAPABILITIES
I conducted extensive research to identify all possible types of animations achievable with the API. Additionally, I looked for inspiration from current trends in web animations to align the API's capabilities with these trends.
EDUCATIONAL MATERIALS
The educational materials include a presentation with a deep dive on how to use the Timeline API, a hands-on workshop following the presentation, and a go-to website offering inspiration, code snippets, and explanations.
the course impact
EMBRACING TIMELINE API
Designers who took the course embraced the new capabilities of the API and began creating beautiful sites with animations. The marketing team was inspired by it and used it to create marketing and educational materials for users. The Wix Education team also used this course to educate non-designers on the Timeline API. This course became essential for any new designer joining the design guild.