FAME / DOCS / SELECTIONS
Animation targets & triggers
Introduction to how selections work in F.A.M.E. Discover how you can allow multiple triggers and targets for your animations
Unlock a whole new level of Interactivity in Framer
Click animations allow you to animate any layer based on the click event. In the examples below, we'll animate the black square, in which a FAME component has been inserted. The animations tho, will take place by different selections methods.
01
Animation Triggers
USE AS TRIGGER
Self
Already possible in Framer, but limited terms of interactions possibilities. Animate the element by clicking on itself
External element
Trigger an animation by selecting any element on the canvas via its ID (scroll section)
Siblings
Trigger animations by interacting with the siblings of an element
Children
Trigger animations by interacting with the children of the elmeents. With advanced selection you can decide which ones to include and which ones to exlclude
Animation Targets
02
FAME allows you to use any element as your animation target, just as you can select them for the animation trigger.
TARGETS
Allow multiple targets & multiple events for trigger
Already possible in Framer, but limited terms of interactions possibilities. Animate the element by clicking on itself
SELF
CHILDREN
PARENT
SIBLINGS
ADVANCED
Advanced selection
03
The thing I missed the most inside Framer, coming from a front-end background, was the ability to select animation triggers and target based on the element tag, or className, or anything a querySelector allows.
Selectors
Select with CSS or Framer name
Fame allows you to select any trigger or target in multiple ways, like CSS querySelector, ID, Framer name or HTML Tag.
logic
Match all, match any, include or exclude
You can decide to use advanced selections to include or exclude by the criteria you choose. This is available both for