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
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.
<img>
Name: Row
Name: Row
ID:#progress
#controls > *
HTML TAG <IMG>
FRAMER NAME
SCROLL SECTION
CSS SELECTOR
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