Events » Change events

Change events

Yes, there are even more events to tap into. With a ‘change’ event can listen to the changes of any property.

And when you’re animating that property you will get 🔃 continuous updates of the changes. (list of animatable properties in Animation)

For example, if you were to listen to a layer’s rotation

# print the rotation value
layer.on "change:rotation", ->
    print this.rotation
Download Framer project

…you would see a stream of values appear in the Console when a rotation animation is running.

Note that for all the other events we’ve been using shortcuts.


layerA.onTap ->

Is short for this:

layerA.on Events.Tap, ->

Change events don’t have shortcuts, so you must always write the , before the ->.

Example change events

Below are some change events that you might not have thought of.

You can look at the position or size of a layer, or both at the same time:

"change:point" 🔃New x or y position
"change:size" 🔃New width or height values
"change:frame" 🔃New x, y, width or height values

You can also track when the HTML or style of a layer changed, when a child is added or removed from its parent, or when a layer becomes or ceases to be the parent of another layer. And there’s an event specifically for PageComponents.

"change:style"New style declaration
"change:html"New html declaration
"change:text"Text content of a Text Layer changed
"change:children"Added or removed child layers
"change:parent"The layer is added to or removed from a parent layer
"change:currentPage"The PageComponent snapped to a page