fix: ensure any anim stage combos work

Author: EvanLovely

docs-site/src/pages/pattern-lab/_patterns/02-components/animate/05-animate.twig

@@ -3,31 +3,102 @@
   <button onclick="trigger('in')">Trigger Build In</button>
   <button onclick="trigger('out')">Trigger Build Out</button>
   <div class="demo-animate__items">
-    <bolt-animate
-      initial-appearance="hidden"
-      in="fade-in-slide-left"
-      in-duration="1000"
-      in-easing="ease-out"
-      idle="pulse"
-      idle-delay="500"
-      out="fade-out-slide-right"
-    >
-      <h2>Hi!</h2>
-    </bolt-animate>
+    <div class="demo-animate__item">
+      <bolt-animate
+        initial-appearance="hidden"
+        in="fade-in"
+        in-duration="2000"
+        idle="pulse"
+        out="fade-out"
+      >
+        <h2>In, Idle, Out</h2>
+      </bolt-animate>
+    </div>
+
+    <div class="demo-animate__item">
+      <bolt-animate
+        initial-appearance="hidden"
+        in="fade-in"
+      >
+        <h2>In</h2>
+      </bolt-animate>
+    </div>
+
+    <div class="demo-animate__item">
+      <bolt-animate
+        idle="pulse"
+        idle-duration="5000"
+        out="fade-out"
+      >
+        <h2>Idle, Out</h2>
+      </bolt-animate>
+    </div>
+
+    <div class="demo-animate__item">
+      <bolt-animate
+        out="fade-out"
+      >
+        <h2>Out</h2>
+      </bolt-animate>
+    </div>
+
+    <div class="demo-animate__item">
+      <bolt-animate
+        initial-appearance="hidden"
+        in="fade-in"
+        out="fade-out"
+      >
+        <h2>In, Out</h2>
+      </bolt-animate>
+    </div>
+
+    <div class="demo-animate__item">
+      <bolt-animate
+        initial-appearance="hidden"
+        in="fade-in"
+        idle="pulse"
+      >
+        <h2>In, Idle</h2>
+      </bolt-animate>
+    </div>
+
+    <div class="demo-animate__item">
+      <bolt-animate
+        idle="pulse"
+        idle-duration="5000"
+      >
+        <h2>Idle</h2>
+      </bolt-animate>
+    </div>
   </div>
 
 
+  <style>
+    .demo-animate__item {
+      margin-bottom: 10px;
+    }
+  </style>
+
   <script type="application/javascript">
     const els = document.querySelectorAll('.demo-animate__items bolt-animate');
     els.forEach(el => {
-      el.addEventListener('bolt-animate:end', event => {
-        console.log('pl bolt-animate:end', event);
+      el.addEventListener('bolt-animate:end:in', event => {
+        console.log('pl bolt-animate:end:in', event);
+      });
+      el.addEventListener('bolt-animate:end:out', event => {
+        console.log('pl bolt-animate:end:out', event);
       });
     });
 
     function trigger(type) {
       els.forEach(el => {
-        el.setAttribute('trigger', type);
+        if (type === 'in') {
+          el.triggerAnimIn();
+        }
+        if (type === 'out') {
+          el.triggerAnimOut();
+        }
+        // el.setAttribute('trigger', type);
       });
     }
   </script>

packages/components/bolt-animate/animate.schema.js

@@ -79,10 +79,5 @@ module.exports = {
       enum: easings.map(e => e.value),
       default: 'ease',
     },
-
-    trigger: {
-      type: 'string',
-      enum: ['in', 'out'],
-    },
   },
 };