To create this accordion component we'll create 2 parametric interactions:
1. Accordion opens/closes
To animate the accordion body expanding and collapsing:
Step-by-step
Select the parent frame of one of your accordion cards (
Accordion-Card)Create a new parametric animation → choose On click as the action
Settings → Properties
Turn
YoyoONSet
RepeattoOnce
Trigger & Target
Trigger: Keep
Accordion-Cardselected (component parent frame)
→ Turn ON"By name"Target: Select
text-frame-main(outermost frame of your body text)
→ Turn ON"By name"and"Use replicator"
Animation properties
Choose:
Height,OpacityTurn ON
"Start from"Set:
Height = 0
Opacity = 0Duration:0.5s
2. Arrow rotates when accordion opens
To animate the arrow icon rotation when the accordion is toggled:
Step-by-step
Select the same parent frame (
Accordion-Card)Create a new parametric animation → choose On click
Settings → Properties
Turn
YoyoONSet
RepeattoOnce
Trigger & Target
Trigger:
Accordion-Card(component parent frame)
→ Turn ON"By name"Target:
Arrow2(parent frame of the arrow icon)
→ Turn ON"By name"and"Use replicator"
Animation properties
Choose:
RotateUse
"Change to"Set:
rotation = -90°Set
Duration: 0.3s