How to animate a image slide in and fade in when in viewport?

[fbrugger]

Hi There,

Is there a possibility to get an image to slide in from below and fade in, once the page scrolls to that section?

Thank you very much for your help!

Kind Regards,
Felix

[prakash_s]

Hello Felix,

Thanks for writing to us.

In case you want to fade in the image you can need to enable the Effect module of the Image element and set the animation on scroll. Please have a look at the given screenshot below.

If you have not seen our documentation of the Effect module please have a look at it to learn more about how to set the fade-in animation on the scroll.

Effects Module | Themeco Docs

Hope it helps
Thanks

[fbrugger]

Hi Prakash

Thank you very much for your reply! Yes, that is exactly what I was looking for!

I already had a interaction effect on this images, which zooms the icons in, when hovering over them. Now I have activated the scroll effect too but unfortunately, then the interaction effect doesn’t work anymore:

Is it not possible to combine both effects on the same element?

Startup-Rabatt für Unternehmensgründer

Thanks again for your help!

Kind Regards,
Felix

[ruenel]

Hello Felix,

It is best that your use a DIV element first which where you apply the Scroll effects and then inside the DIV element, insert your Icon element where you use the interaction effect which would zoom in/out the icon. Having it this way, you can have the Scroll and Interaction effects working for your icons. And by the way, you may need to enable the “Link Child Interaction” in your DIV element Effects setting.

Hope this makes sense.

[fbrugger]

Hi Ruenel

Thank you very much for your clever suggestion! That’s great adn is exactly the effect I was looking for!

Thanks again for your great support!

[tristup]

Hi Felix,

Glad that we are able to help you.

Thanks