Timeline Controllers
The Timeline Controller is a mini-system that interacts with the GSAP animation timelines, allowing you to trigger/run a particular timeline on mouseClick or mouseEnter handlers.
You can choose between several options so that the timeline is played only once, or only once forth and back, or forth and back indefinitely.
Prerequisites!
In order to make the Timeline Controller functiontional, you must provide the Animation ID and Pause the target animation in first place.
By default, each animation you create is a scroll triggered animation. Once you pause it, it’ll no longer be playable by the trigger point but rather wait for a “command”.
To reference a paused animation, you must assign it an ID. This ID can be any alphanumeric string (including spaces), but remember that IDs are case sensitive.
Timeline Trigger Event
It can either be “Mouse Click” or “On Mouse Enter” (a.k.a. mouse hover).
If you chose “Mouse Click” as a Timeline Trigger Event, you’ll be supplied with available Click Handler list. If your choice was “On Mouse Enter”, then the list includes all available Mouse Enter Handlers.
At the moment both lists are identical.
Click Handler
That controller supports these user interaction patterns:
- Once: Plays the timeline only once.
- Each click start over: Restart the timeline on every click.
- Play and Reverse once: Toggle play/reverse but only once.
- Play and Reverse indefinitely: Toggle play/reverse indefinitely.
Mouse Enter Handler
That controller is almost identical to the Click Handler with once exception; a mouseEnter and mouseLeave are used instead of clicks.
- Once: Plays the timeline on mouseEnter only once.
- Each mouseEnter start over: Restart the timeline on each mouseEnter event.
- Play and Reverse on mouseLeave once: Toggle play/reverse on mouseEnter and mouseLeave respectively – only once.
- MouseEnter and mouseLeave indefinitely:Toggle play/reverse on mouseEnter and mouseLeave respectively – indefinitely.
Animation IDs
Add one or more Animation IDs. They will be played one after another in the exact order you arrange them in the panel.
Execution Mode
That controller is almost identical to the Click Handler with once exception; a mouseEnter and mouseLeave are used instead of clicks.
- Simultaneous: In this mode all animations run at the same time.
- Sequential: Animations run one after another.
If you want to change the sequence in which animations are played, rearrange them (drag’n’drop) in the Animation IDs panel.
In case you want to add some delay to either Simultaneous or Sequential timelines execution, you can do it under the “Animation Keypoints” settings that relate to the target animation.
Example
By words: Toggle play/reverse Reveal Image animation on button click, indefinitely.
