By utilizing swift effects, you have the ability to apply over 20 pre-designed entrance, exit, and accentuation animations to elements through clicking, hovering, and scrolling.
Within this tutorial:
- Transition animation
- Expand animation
- Elastic band animation
Transition animation
- After selecting one of your items, access the Interactions panel
- Press the addition symbol beside Element Trigger
- Select Scroll Into View from the drop-down list
- From the Action menu below When Scrolled Into View, pick Transition
- Choose the transition direction from the drop-down list (e.g., From Left)
- In Trigger settings, ensure that this animation is implemented on all elements with this characteristic (e.g., Class: Checklist item)
Expand animation
- After selecting one of your items, access the Interactions panel
- Press the addition symbol beside Element Trigger
- Select Scroll Into View from the drop-down list
- From the Action menu below When Scrolled Into View, select Expand
- In Trigger settings, ensure that this animation is implemented on all elements with this characteristic (e.g., Class: feature cell)
Elastic band animation
- After selecting one of your items, access the Interactions panel
- Press the addition symbol beside Element Trigger
- Select Mouse Hover from the drop-down list
- From the Action menu below On Hover, select Elastic Band
- In Trigger settings, ensure that this animation is implemented on all elements with this characteristic (e.g., Class: Button and Dark Outline)
Latest posts by Ewan Mak (see all)
- Include or eliminate Workspace spots and members - April 15, 2024
- Centering box summary - April 15, 2024
- Store a site for future reference - April 15, 2024