Trigger CSS3 Animations As Elements Are Revealed By Scroll – Enfold.js

Preview:

Description:

Enfold.js is a tiny web component that allows you to trigger 20+ CSS3 powered animations when elements are revealed by user scroll.

How to use it:

1. Download and import the enfold.js.

<script src="/path/to/build/enfold.min.js"></script>

2. Initialize the enfold.js.

Enfold({
  // Options here
});

3. Wrap the element in the enfold-animate Custom Element and specify the animation type in the name attribute. All available animation names:

• fadeRight
• fadeIn
• fadeLeft
• slideRight
• slideUp
• slideDown
• slideLeft
• zoomInRight
• zoomIn
• zoomInLeft
• rotateCenter
• rotateDiagonal
• rotateBotLeft
• rotateVertical
• flipHorizontalBottom
• flipScaleUpHor
• slideRotateTopHor
• slideRotateHorBottom
• shadowDropCenter
• shadowDropTB
• shadowDropLR
• shadowDrop2Center

<enfold-animate name="fadeIn">
  <div>
    Element To Animate
  </div>
</enfold-animate>

4. Trigger a function when the element is scrolled into view.

Enfold({
  effects: {
    // function here
  },
});

<enfold-animate name="fadeIn" effect="functionName">
  <div>
    Element To Animate
  </div>
</enfold-animate>

5. More attributes to customize the animation.

• delay: Delay in seconds
• duration: Duration in seconds
• easing: Easing function
• intensity: Intensity in pixels
• threshold: Default: 0.3 (30%)
• once: Trigger animation only once

<enfold-animate name="fadeIn" delay="1" duration="1" easing="ease" intensity="100" threshold="0.3" once>
  <div>
    Element To Animate
  </div>
</enfold-animate>