> Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt # Method name: onComplete(handler: Function) # Method package: wixAnimationsFrontend # Method menu location: wixAnimationsFrontend --> TimeLine --> onComplete # Method Link: https://dev.wix.com/docs/velo/velo-only-apis/wix-animations-frontend/time-line/on-complete.md # Method Description: Sets an event handler that runs when the timeline completes playing. The event handler set by calling the `onComplete()` function runs when a timeline completes playing by reaching the end. When a timeline has been set to repeat, the event handler runs at the end of the last repetition and does not run for the preceding repetitions. If an event handler is already set for `onComplete`, setting a new event handler overrides the one set previously. To remove an event handler you set previously, call the `onComplete()` function and pass `null` for the `handler` parameter. # Method Code Examples: *** Note: do not assume any prop names or enum values other than the ones in the example. ## Set an event handler that runs when a timeline completes playing forwards ```javascript import wixAnimationsFrontend from 'wix-animations-frontend'; let timeline = wixAnimationsFrontend.timeline(); // ... timeline.onComplete( () => { // handle timeline forwards completion console.log("Timeline has completed playing in reverse."); } ); ``` ## Remove the event handler that runs when a timeline completes playing forwards ```javascript import wixAnimationsFrontend from 'wix-animations-frontend'; let timeline = wixAnimationsFrontend.timeline(); // ... timeline.onComplete( null ); ``` ## Display a message when a timeline completes playing forwards ```javascript import wixAnimationsFrontend from 'wix-animations-frontend'; let timeline = wixAnimationsFrontend.timeline(); $w.onReady( function () { const myImage = $w("#myImage"); timeline .add( myImage, { "rotate": 360, "scale": .5, "duration": 1000 } ) .add( myImage, { "opacity": 0, "duration": 1000 } ) .onComplete( () => { $w("#messageText").text = "Timeline has completed playing forwards."; } ) .play(); } ); ``` ---