How do you animate an image into the page?

[simona6]

https://d-themes.com/wordpress/udesign/corporate-4/

Hi

We are trying to create this effect on a website.  So when the image loads, it comes in like that.  I've tried to delve into the code, but can't quite work out what's needed.

Does anyone know the solution so we can look and test?

[Strider64]

I don't know the exact code, but I can tell you they not only were moving the image they were also using a mask at the same time giving the illusion that it move farther than it did. Moving the image a little bit should be easy enough it's the masking part that rotates that might be a little tricky.

[gizmola]

You need to get really familiar with the web development tools, inspect elements look at page source code, and figure out how to figure out these things for yourself.

When you say "comes in like that, there are multiple things happening, but in general, these are all css animations.  Do some learning in regards to how they work, and things like keyframes.

This is an elementor hosted site, and thus it includes a bunch of styles that come in from the elementor.min.css file, that is part of their publishing platform.

So if you look at the image in the top right, and the flex box it is contained within, you will notice a lot of different styles driving this functionality.  I will hi-light a couple for you:

<div class="elementor-container elementor-column-gap-no">
    <div class="elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-af52a3e animated-slow alpha-entrance-reveal animated rotateInDownRight" data-id="af52a3e" data-element_type="column" data-settings="{&quot;animation&quot;:&quot;rotateInDownRight&quot;}">
        <div class="elementor-widget-wrap elementor-element-populated">
	        <div class="elementor-element elementor-element-bca11ec animated-slow elementor-widget elementor-widget-image animated fadeInRightShorter" data-id="bca11ec" data-element_type="widget" data-settings="{&quot;_animation&quot;:&quot;fadeInRightShorter&quot;}" data-widget_type="image.default">
		        <img fetchpriority="high" decoding="async" width="945" height="763" src="https://d-themes.com/wordpress/udesign/corporate-4/wp-content/uploads/sites/74/2024/10/intro-banner-image.png" class="lazy-fade attachment-full size-full wp-image-3916" alt="Banner" srcset="https://d-themes.com/wordpress/udesign/corporate-4/wp-content/uploads/sites/74/2024/10/intro-banner-image.png 945w, https://d-themes.com/wordpress/udesign/corporate-4/wp-content/uploads/sites/74/2024/10/intro-banner-image-768x620.png 768w" sizes="(max-width: 945px) 100vw, 945px">
            </div>
	        <div class="elementor-element elementor-element-e4a20a1 elementor-widget__width-auto elementor-absolute animated-slow elementor-widget elementor-widget-image animated fadeIn" data-id="e4a20a1" data-element_type="widget" data-settings="{&quot;_position&quot;:&quot;absolute&quot;,&quot;_animation&quot;:&quot;fadeIn&quot;,&quot;_animation_delay&quot;:600}" data-widget_type="image.default">
	            <img decoding="async" width="279" height="623" src="https://d-themes.com/wordpress/udesign/corporate-4/wp-content/uploads/sites/74/2023/08/shape-1.png" class="lazy-fade attachment-large size-large wp-image-727" alt="shape">							        </div>
        </div>
    </div>
</div>

 

Notice that this div that contains these other divs, has some styles like:  alpha-entrance-reveal, animated, rotateInDownRight, etc.  

Figure out where these styles are defined.  You can do this by clicking on the style names in dev tools.

You will find that for "rotateInDownRight" there's this definition:

.alpha-entrance-reveal.rotateInDownRight {
    animation-name: revealRotateInDownRight;
}

The dev tools even include a little paperclip icon that that will run the animation when clicked, so you can easily see the effect it produces.

Look up the css definition of animation-name and what it does.  

 

CSS Animations like many similar packages utilize key frames.  You set up a particular state and the animation calculates how to get from that initial state to future keyframes.  

So the definition of "revealRotateInDownRight" turns out to be this css animation:

 

@keyframes revealRotateInDownRight {
    0% {
        transform: rotate(25deg);
        transform-origin: right bottom
    }

    to {
        transform: rotate(0);
        transform-origin: right bottom
    }
}

 

It should be apparent that what is happening is that it is starting with the element rotated 25 degrees, using the bottom right corner as the "origin".  You want to investigate what an "origin" is for in a grid or animation system.

When the animation is complete, the element will no longer be rotated.

What you can do, is make small tests to explore these effects.  It should go without saying that there are many other styles that are contributing to the overall animation effects of the page, but individually you can understand them once you break them down and isolate them.

 

If you investigate the "fadeInRightShorter" you will find a similar transformation that utilizes transform-origin.

@keyframes fadeInRightShorter {
    0% {
        opacity: 0;
        transform: translate(50px,0);
        transform-origin: 0 0
    }

    to {
        opacity: 1;
        transform: none
    }
}

.fadeInRightShorter {
    animation-name: fadeInRightShorter
}

 

This page has an awful lot going on, including the use of Skrollr, which is a really old javascript scroll animation library.  

[simona6]

Thanks all.
Mask - yes I know about that.  Just an SVG that is applied to the image overlay, with some CSS that controls the sizing.
If both are moving, it's prob a little tricky to recreate.

Just kind of wondering generally how to do it.
I know CSS pretty well, really well, but this is as someone here said, almost double layered CSS animation.