Repetition Image Hover Effects

Celý článek

The other day, I encountered a very interesting animation. It’s kind of a repetition effect on an image where the same gets scaled, layer by layer. This is Eva Habermann’s website where this element has that exact effect:

While this is a scroll based animation, there was also a hover effect somewhere, I just can’t recall where! If you’ve seen it, please let me know so that I can add it here.

There are some interesting parameters that we can play with in order to create different touches, all with a unique look and feel, so this is what I came up with, hope you enjoy it!

The way that we can define the parameters is as follows:

<div 
	class="image image--style-3" 
	data-repetition data-repetition-elems="6" 
	data-repetition-origin="150% 100%" 
	data-repetition-animate="scaleY" 
	data-repetition-stagger="-0.12" 
	data-repetition-initial-scale="1.3" 
	data-repetition-duration="0.5" 
	data-repetition-ease="power1.inOut" 
	style="background-image:url(img/11.jpg);">
</div>

We make the following structure out of this:

<div class="image image--style-3" style="background-image: none; transform-origin: 150% 100%; transform: translate(0px, 0px);">
    <div class="image__wrap">
        <div class="image__element" style="background-image: url(11.jpg); transform-origin: 150% 100%; transform: translate(0px, 0px);"></div>
    </div>
    <div class="image__element" style="background-image: url(11.jpg); transform: translate(0px, 0px);"></div>
    <div class="image__element" style="background-image: url(11.jpg); transform: translate(0px, 0px);"></div>
    <div class="image__element" style="background-image: url(11.jpg); transform: translate(0px, 0px);"></div>
    <div class="image__element" style="background-image: url(11.jpg); transform: translate(0px, 0px);"></div>
    <div class="image__element" style="background-image: url(11.jpg); transform: translate(0px, 0px);"></div>
</div>

Then we animate the “image_element” divs according to the parameters set.

Here’s a short explanation of the parameters:

data-repetition 					
// this is so that we know we have to apply the effect

data-repetition-elems="4" 			
// number of inner elements/images

data-repetition-animate="scale" 	
// property to animate: scale, scaleX, scaleY 

data-repetition-origin="50% 50%" 	
// transform origin

data-repetition-stagger="-0.1" 		
// GSAP animation stagger value between each inner image

data-repetition-initial-scale="2" 	
// this is the initial scale that is applied to the first inner child

data-repetition-duration="0.8" 		
// animation duration

data-repetition-ease="power2.inOut" 
// animation ease

There’s lots of things to experiment with here, so I hope you can use this to have some fun with it!

Here’s our first example:

The main idea is to have repeated layers of the same image and do something to them, like scale them up and down, like in this case. There’s a little twist added here, which is that the first and last layer also have a zoom effect on the image. Changing the transform origin, can also add a nice touch to it:

I really hope you enjoy this and find it useful!

Thanks for checking by and if you want to support our work, please share and give us a follow @codrops!

The post Repetition Image Hover Effects appeared first on Codrops.