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

Category: Animation , Javascript | February 14, 2022
Author:mart-anthony-stark
Views Total:286 views
Official Page:Go to website
Last Update:February 14, 2022
License:MIT

Preview:

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

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>

You Might Be Interested In:


Leave a Reply