Toggle Actions

With Toggle Actions, you can run a certain action when a scroll trigger is activated or deactivated.

The Toggle Actions properties are like little switches that you can flip on and off based on the scroll trigger’s state.

  • onEnter This event occurs when the scroll trigger enters the viewport. It’s like the trigger element first comes into view as you scroll the page.
  • onLeave This event happens when the scroll trigger exits the viewport. It’s like the trigger element disappears as you scroll past it.
  • onEnterBack This event is triggered when the scroll trigger re-enters the viewport after having been scrolled past. It’s like the trigger element reappears as you scroll back up.
  • onLeaveBack This event takes place when the scroll trigger leaves the viewport again after having re-entered. It’s like the trigger element disappears again as you scroll past it.

The Actions

  • play This action initiates the animation associated with the scroll trigger. It’s like the animation starts playing when the trigger element becomes visible or re-appears.
  • pause This action pauses the animation associated with the scroll trigger. It’s like the animation stops momentarily when the trigger element is scrolled past or exits the viewport.
  • resume This action restarts the paused animation associated with the scroll trigger. It’s like the animation continues playing from where it left off when the trigger element re-enters or re-appears.
  • reverse This action reverses the direction of the animation associated with the scroll trigger. It’s like the animation plays backward when the trigger element reaches its final position.
  • restart This action restarts the animation from the beginning, regardless of its current state. It’s like the animation starts over completely when the trigger element re-enters or re-appears.
  • reset This action stops and resets the animation associated with the scroll trigger. It’s like the animation is turned off and its original state is restored when the trigger element leaves the viewport.
  • complete This action is triggered when the animation associated with the scroll trigger reaches its final state. It’s like a flag is raised indicating that the animation has finished playing.
  • none This action indicates that no specific action should be taken when the corresponding event occurs. It’s like the scroll trigger is inactive and doesn’t trigger any animation or action.

By combining these events and actions, you can create complex and dynamic animations that respond to the user’s scrolling behavior. You can pause animations as the user scrolls past certain sections of the page, restart animations when they return, or even reverse animations when they reach their final position. The possibilities are endless.