Advanced Animations and Interactions with Framer X
45mAdvanced2019-09-20
Authors
Emmanuel Henri
Executive with 20+ years of experience in programming and design
Course details
If you are designing prototypes in Framer X and find yourself ready to add more complexity and interaction, join instructor Emmanuel Henri as he shows you how to use Framer X to make your prototypes more engaging and appealing with audio and video. Learn how to set up a project for animation in Framer X and Sketch. See how to customize your prototype with media elements. Plus, find out how to fine-tune the end product before delivering for review.
Learning objectives
Setting up design files
Importing and exporting files
Enabling side-scrolling
Adding animation to scrolling
Animating the summary detail
Transitioning to the detail card
Inserting video elements
Inserting sounds
Adding SVG animations
Delivering for review
Learning objectives
Setting up design files
Importing and exporting files
Enabling side-scrolling
Adding animation to scrolling
Animating the summary detail
Transitioning to the detail card
Inserting video elements
Inserting sounds
Adding SVG animations
Delivering for review
Skills covered
Framer XFramerUser Interface PrototypingInteraction DesignUser ExperienceProject
Concepts
0. Introduction
- 01 - Advanced animations with Framer X
- 02 - What you should know
1. Setting Up the Project
- 03 - Inspiration for the project
- 04 - Setting up plugins for transfer
- 05 - Importing files into Framer
2. Shopping View Interaction
- 06 - Links for shopping views
- 07 - Scrolling with cards
- 08 - Overrides intro
- 09 - Update code for further interactions
3. Purchase View Interactions
- 10 - Links for purchase view
- 11 - Framer API introduction
- 12 - Advance coding techniques for interactions
- 13 - Finalize code for interactions
4. Advance Interactions
- 14 - Adding store components
- 15 - Adding sound
- 16 - Adding videos
Conclusion
- 17 - Next steps