Skip to content

Latest commit

 

History

History
50 lines (37 loc) · 1.78 KB

README.md

File metadata and controls

50 lines (37 loc) · 1.78 KB
Raw

Image Reveal Animations

A JavaScript library which uses GSAP to create some image reveal animations that trigger on HTML element hover.

Demo

Check out the demo of this project right here.

Usage

Initialization

  • Make sure to install GSAP library into your current project.
  • Add ira.js file from this repo to your project.
  • Import the Ira class from ira.js file into the file where you would like to initialize an animation.
  • Initialize an animation by passing the element, imageUrl and animationType into the Ira class with new Ira(element, imageUrl, animationType).

Example

import Ira from "./ira.js";

const element = document.querySelector(".my-element");
const imageUrl = "./images/my-image.png";
const animationType = "slide"

new Ira(element, imageUrl, animationType);

Arguements

The Ira(element, imageUrl, animationType) class takes in three arguements: element, imageUrl and animationType.

Arguement Type Description
element object Defines an object from the dom to which we would like to add the desired hover animation.
imageUrl string Defines a path to the image that we would like to display when the desired element gets hovered.
animationType string Defines the name of the animation that we would like to use.

Animation types that are currently available:

  • "boring"
  • "fade"
  • "unfold"
  • "slide"
  • "corner"
  • "spiral"

Credits

Licence

Completely free for use in all types of commercial or personal projects. Mentions are required when uploading or reposting any of original or modified code from this project.