This content originally appeared on Codrops and was authored by Mary Lou
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 easeThere’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.
This content originally appeared on Codrops and was authored by Mary Lou
Mary Lou | Sciencx (2022-02-22T10:32:16+00:00) Repetition Image Hover Effects. Retrieved from https://www.scien.cx/2022/02/22/repetition-image-hover-effects/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.