Blog

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.