Javascript library to animate images on hover.

Essam Abed

Last update: Nov 21, 2022

Overview

Ripple Hover Effect

Javascript library to animate images on hover.

If this project help you, don't forget to star it.

Codepen demo by Essam Abed

Demo

ripple-effect-demo.mp4

Installation

Install using npm:

    npm i ripple-hover-effect

Or use a cdn:

https://unpkg.com/browse/[email protected]/src/ripple-effect.js

Use locally

To load the images you'll need to view the demo via a web server, simply open the projet with vscode then run the index.html file with Live Server.

Basic usage

This little library needs Three.js and Gsap to do the transition, so you need to include it before this library.

How it works:

<!-- Div to draw the effect on -->
<div class="my-div"></div>

<!-- library needed -->
<script src="three.min.js"></script>
<script src="gsap.min.js"></script>

<script src="dist/ripple-effect.js"></script>
<script>
    var ripple = new RippleEffect({
        parent: document.querySelector('.my-div'),
        intensity: 1,
        strength: 2,
        area: 4,
        waveSpeed: 0.001,
        speedIn: 2,
        speedOut: 1.5,
        easing: 'Expo.easeInOut',
        hover: true,
        texture: './img/my-img.jpg',
    });
</script>

Options

Mandatory parameters

Name	Type	Default	Description
`parent`	`Dom element`	`null`	The DOM element where the animation will be injected. The images of the animation will take the parent's size.
`texture`	`Image`	`null`	The `Image` of the animation.

Optional parameters

Name	Type	Default	Description
`intensity`	`Float`	`1`	Used to determine the intensity of the ripple effect. 0 is no effect and 1 is full ripple.
`strength`	`Float`	`2`	Strength of the ripple effect.
`area`	`Float`	`6`	Area affected by the ripple effect.
`waveSpeed`	`Float`	`0.01`	Ripple waves travel speed.
`speedIn`	`Float`	`1.4`	Speed of the inbound animation (in seconds).
`speedOut`	`Float`	`1.2`	Speed of the outbound animation (in seconds).
`hover`	`Boolean`	`true`	if set to false the animation will not be triggered on hover (see `start` and `stop` function to interact)
`easing`	`String`	`Expo.easeOut`	Easing of the transition, see greensock easing

Methods

Name	Description
`start`	Start the ripple effect.
`stop`	Stop the ripple effect.

Credits

Thanks to :

Three.js
Gsap by GreenSock
Images from Unsplash.com

Example

WebGL.Ripple.Effect.mp4

Animate elements as they scroll into view.

Animate elements as they scroll into view. Introduction ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the vie

Jan 4, 2023

A lightweight script to animate scrolling to anchor links.

DEPRECATION NOTICE: Smooth Scroll is, without a doubt, my most popular and widely used plugin. But in the time since I created it, a CSS-only method f

Dec 26, 2022

A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view.

jQuery AniView A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view. Now supports v4

Sep 10, 2022

A JQuery plugin to animate text as in the credits of the 2014 movie "Birdman".

birdman.js A JQuery plugin to animate text as in the credits of the 2014 movie "Birdman". See it in action at chrisma.github.io/birdman.js I'm aware t

Dec 30, 2021

The easiest way to animate your Next.js project. Scrollreveal.js helper package.

next-reveal The easiest way to animate your Next.js app Demo Introduction next-reveal makes it easy to add awesome scroll animations to your Next.js p

Nov 25, 2022

Alpine.js wrapper for @formkit/auto-animate.

💫 Alpine AutoAnimate 💫 An Alpine.js wrapper for @formkit/auto-animate. 🚀 Installation CDN Include the following script tag in the head of your

Dec 28, 2022

Compare James Webb Space Telescope images to older images.

How much more powerful is the James Webb Space Telescope when compared to Hubble? Find out! More info Want to help out? CONTRIBUTING.md Blog post with

Jan 3, 2023

Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries.

Image Zoom (jQuery) Plugin Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries that is less th

Aug 3, 2022

Easiest 1-click way to install and use Stable Diffusion on your own computer. Provides a browser UI for generating images from text prompts and images. Just enter your text prompt, and see the generated image.

Stable Diffusion UI Easiest way to install and use Stable Diffusion on your own computer. No dependencies or technical knowledge required. 1-click ins

Dec 30, 2022