Skip to main content
Named events connect custom JavaScript to timelines created in the Visual Designer. The generated timeline stays in the visual’s custom JavaScript.

​
Configure an event

Select a layer and open Animations. Choose Custom event and enter a name, such as score-updated. Add one or more animations to that event. Use the same name on other layers to animate them together. Start times remain relative to the event.

​
Trigger from JavaScript

visualLink.animations.emit(name) restarts the timeline registered for that name. The method returns no value. A name with no registered timeline has no effect. Emitting the event again restarts its animation. Use Test event or the timeline play button to inspect the designer animation.

​
Keep animation ownership clear

Designer actions are custom GSAP. You can extend the generated code, but keep the lifecycle wiring and timeline declarations in a form the Animations panel recognises. Existing visualLink.playStateManager, getCanvasElement, abortController and cleanup behavior remain available. See the GSAP guide for lifecycle handlers and the animation guide for the inspector.