Enfold js

A simple element reveal animation library

• Animation Demo
• Usage
• Component Attributes
• Side Effects
• Animation Names
• Samples

Usage

Include the external Javascript file to your html document.

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

Or you can use this link:

<script src="https://mart-anthony-stark.github.io/Enfold-js/src/enfold.min.js"></script>

call the Enfold method in your script

// app.js
Enfold({
  // Options
});

Wrap the element you want to animate when entering the screen with enfold-animate component.

<enfold-animate name="fadeIn">
  <div>...</div>
</enfold-animate>

Attributes

• name

  • Specifies the animation name

• delay

  • This attribute specifies a delay for the start of an animation. Default: 0s

• duration

  • The duration attribute defines how long an animation should take to complete one cycle.

• easing

  • easing attribute specifies the speed curve of an animation. The speed curve defines the TIME an animation uses to change from one set of CSS styles to another. Default: ease

• intensity

  • This attribute specifies how wide does the animation occupies. This only applies to shifting animations (does not include fadeIn)

• threshold

  • The animation activated when the threshold is crossed into the viewport. A threshold of 1.0 means that when 100% of the target is visible within the element specified by the root option, the callback is invoked. Default: 0.3

• once

  • If the once attribute is present, the animation will be triggered only once the element enters viewport.

Side Effects

Side effects are functions that will be triggered once the component is visible to screen and started animating

• Define your functions in effects option when calling out Enfold method

Enfold({
  effects: {
    log: (entry) => {
      // User defined sideEffect function
      console.log("LOG EFFECT");
      console.log(entry.target);
    },
  },
});

• Add 'effect' attribute with the method name as value to the enfold-animate component you want

<enfold-animate name="slideRight" effect="log">
  <h1 class="title">Enfold Js</h1>
</enfold-animate>

Animation Names

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

Samples

<enfold-animate name="fadeRight" duration="1">
  <div class="box">
    <h1>Section 1</h1>
    <h2>Fade Right</h2>
  </div>
</enfold-animate>

<enfold-animate name="fadeIn">
  <div class="box">
    <h1>Section 1</h1>
    <h2>Fade In</h2>
  </div>
</enfold-animate>

<enfold-animate name="fadeLeft">
  <div class="box">
    <h1>Section 1</h1>
    <h2>Fade Left</h2>
  </div>
</enfold-animate>