Triggle Cinematic Explorer

The triggle.js library lets you easily add interactive animations to your HTML elements using data- attributes. Here's a rundown of each trigger type.

Animate on Click

Trigger an animation on click.

Click Me 
<div class="cssanimation"
  data-triggle="click"
  data-triggle-class="ca__fx-elasticStretch" 
  data-triggle-reset="true">
  Click Me
</div>

Hover with Delay and Duration

This example shows how to trigger an animation on hover with custom timing and automatic reset

Hover me to fade in 
<div class="cssanimation"
  data-triggle="mouseenter"
  data-triggle-class="ca__fx-fadeIn"
  data-triggle-reset="true">
  Click or Hover
</div>

Animates Once

This example shows how to trigger an animation only for a single time:

Click Me (Animates Once) 
<div class="cssanimation" 
  data-triggle="click" 
  data-triggle-class="ca__fx-swingIn" 
  data-triggle-reset="true">
  Click Me (Animates Once)
</div>

Multiple Triggers

Trigger animation with multiple events (mouseenter and mouseleave).

Click or Hover 
<div class="cssanimation"
  data-triggle="click,mouseenter" 
  data-triggle-class="ca__fx-spiralTwistIn" 
  data-triggle-reset="true">
  Click or Hover
</div>

Targeting Another Element

You can trigger animations on a different element using the data-triggle-target attribute:

Target 
<button data-triggle="click" 
  data-triggle-class="ca__fx-fadeIn" 
  data-triggle-target="#targetBox"
  data-triggle-reset="true">
   Click to Animate Target
</button>

<div id="targetBox" class="cssanimation">
  Target
</div>

Targeting Multiple Element

If you want to target multiple elements, separate them with commas in the data-triggle-target=".box, #banner" attribute:

Target 1
Target 2
Target 3 
<button
  data-triggle="click"
  data-triggle-target=".box1, #triggleTarget2, #triggleTarget3">
  Click to Animate Target Multiple
</button>

<div
  class="cssanimation box1"
  data-triggle-class="ca__fx-rollFromLeft"
  data-triggle-reset="true">
  Target 1
</div>

<div id="triggleTarget2"
  class="cssanimation"
  data-triggle-class="ca__fx-rollFromTop"
  data-triggle-reset="true">
  Target 2
</div>

<div id="triggleTarget3"
  class="cssanimation"
  data-triggle-class="ca__fx-rollFromRight"
  data-triggle-reset="true">
  Target 3
</div>

Triggle Group Triggering

Trigger animations on multiple elements at once using data-triggle-group.

Trigger
Card 1
Card 2 
<div class="cssanimation" 
  data-triggle="click" 
  data-triggle-class="ca__fx-layerPeelIn" 
  data-triggle-group="cards">
  Trigger
</div>

<div class="cssanimation" 
  data-triggle-class="ca__fx-rollFromLeft" 
  data-triggle-reset="true" 
  data-triggle-group="cards">
  Card 1
</div>

<div class="cssanimation" 
  data-triggle-class="ca__fx-rollFromRight" 
  data-triggle-reset="true" 
  data-triggle-group="cards">
  Card 2
</div>

Triggle Toggle Animation

Use data-triggle-toggle="true" to turn the animation class on and off with each trigger:

Toggle Me 
<div class="cssanimation" data-triggle="click" data-triggle-class="ca__fx-moonFade" data-triggle-toggle="true">
  Toggle Me
</div>

Triggle Scroll Animation

Animate elements as they scroll into view using data-triggle-scroll="true":

Scroll to Reveal 
<div class="cssanimation" 
  data-triggle="scroll" 
  data-triggle-scroll="true" 
  data-triggle-class="ca__fx-moonFadeUp" 
  data-triggle-reset="true">
  Scroll to Reveal
</div>

Triggle Scroll-Based Staggered Animation

Scroll to trigger staggered animations with 300ms delay between group elements.

Trigger
Card A
Card B 
<div class="cssanimation" 
  data-triggle="scroll" 
  data-triggle-scroll="true" 
  data-triggle-group="staggerGroup" 
  data-triggle-class="ca__fx-moonFadeScaleUp" 
  data-triggle-stagger="300">
  Trigger
</div>

<div class="cssanimation" 
  data-triggle-class="ca__fx-moonFadeLeft" 
  data-triggle-reset="true"
  data-triggle-group="staggerGroup">
  Card A
</div>

<div class="cssanimation" 
  data-triggle-class="ca__fx-moonFadeRight" 
  data-triggle-reset="true" 
  data-triggle-group="staggerGroup">
  Card B
</div>

Triggle Chained Animation

Chain multiple animations by using data-triggle-next

Step 2 
<button 
  data-triggle="click" 
  data-triggle-class="ca__fx-swingIn" 
  data-triggle-reset="true" 
  data-triggle-next="#chainStep2">
  Start Chain
</button>

<div id="chainStep2" 
  class="cssanimation" 
  data-triggle-class="ca__fx-systemBootIn" 
  data-triggle-reset="true">
  Step 2
</div>

Chained Animation Delay

Click the button to start a chained animation with a 500ms delay.

Step 2 
<button 
  data-triggle="click" 
  data-triggle-class="ca__fx-swingIn" 
  data-triggle-reset="true" 
  data-triggle-next="#chainDelayStep2" 
  data-triggle-chain-delay="500">
  Start Chain
</button>

<div id="chainDelayStep2" 
  class="cssanimation" 
  data-triggle-class="ca__fx-systemBootIn" 
  data-triggle-reset="true">
  Step 2
</div>

Custom Event Trigger

You can use any event name for data-triggle. This allows you to create custom event triggers using JavaScript's dispatchEvent() method.

Custom 
<button id="customTrigger">
  Trigger Custom Event
</button>

<div id="customBox" 
  class="cssanimation" 
  data-triggle="customTriggleEvent" 
  data-triggle-class="ca__fx-flipX" 
  data-triggle-reset="true">
  Custom
</div>

<script>
  document.getElementById("customTrigger").addEventListener("click", () => {
    document.getElementById("customBox").dispatchEvent(new Event("customTriggleEvent"));
  });
</script>

Manual Trigger

Click the button to manually trigger an animation using JavaScript.

Manual 
<button id="manualTrigger">
  Trigger Manually
</button>

<div id="manualBox" class="cssanimation">
  Manual
</div>

<script>
  document.getElementById("manualTrigger").addEventListener("click", () => {
    window.triggle.apply(
      document.querySelector("#manualBox"),
      "ca__fx-bounceIn", // Animation class to apply
      true, // Reset after animation ends
      "0.3s", // Delay before animation starts
      "1s", // Duration of the animation
      false // Toggle mode (true = toggle, false = one-time)
    );
  });
</script>