In this article, we would be implementing a simple and user friendly image transition using JavaScript. To view the demo, click HERE.
Why Transitions
Transitions are animations used to keep users oriented during user interface (UI) state changes and object manipulations, and make those changes feel smooth instead of jarring. Good transitions feel natural, often giving the illusion that users are interacting with real-world objects.
Requirements
Think of GSAP as the Swiss Army Knife of animation…but better. It animates anything JavaScript can touch (CSS properties, canvas library objects, SVG, generic objects, whatever) and it solves lots of browser inconsistencies, all with blazing speed (up to 20x faster than jQuery).
You can find the CDN for the GSAP here.
Three.js is JavaScript 3D library. You can find the CDN for the Three.js here.
This is JavaScript library to draw and animate images on hover. We will make use of the library to quickly put together the animations.
I often make use of Pexels for image inspirations, it has thousands of image and feel free to select amazing images from different categories.
Now let’s get to code, Yeah!
First, I need to give a walkthrough of how I structured my folders for the project.
Index.html
This helper needs Three.js and TweenMax to do the transition, so you need to include it before this little helper. Then you only need a div element in HTML to start animating things with a piece of code like this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<title>Image Transition Using JS</title>
<link rel="stylesheet" href="./dist/css/style.css">
</head>
<body>
<div class="landing">
<div class="intro">
<h2>Myles Munroe</h2>
<p>The greatest tragedy in life is not death, but a life without a purpose.</p>
</div>
<div class="distortion">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>
<script src="./dist/js/hover.umd.js"></script>
<script src="./dist/js/app.js"></script>
</body>
</html>
app.js
Configures and adds the images and displacement image in the hoverEffect object, intensity defines how we want the animation to take be effectives (ease in and ease out). Feel free to play around with the values.
new hoverEffect({
parent: document.querySelector('.distortion'),
intensity: 0.3,
image1: './dist/img/3.jpg',
image2: './dist/img/4.jpg',
displacementImage: './dist/img/heightMap.png'
});
style.css
It helps to style and position the contents on the page.
.landing{
display: flex;
justify-content: space-around;
height: 100vh;
}
.distortion{
width: 400px;
height: 500px ;
align-self: center;
}
.intro {
align-self: center;
}
.intro h2{
font-size : 50px;
}
.intro p{
font-size : 25px;
}
Next, download hover.umd.js.
Finally we are done with implementing image transitions using JavaScript libraries.
Click HERE to download the project source code.
