How to add a Zoom-Effect?

Hi there,

you will need to use CSS Animations. For example add this CSS to your site:

.zoom-loop {
    animation: zoom-loop 2s ease-out infinite;
}

@keyframes zoom-loop {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.5, 1.5);
    }

    100% {
        transform: scale(1, 1);
    }
}

Then select the Headline Block and in Advanced > Additional CSS Class(es) add: zoom-loop

To change ZOOMed in size edit this line of the CSS:

transform: scale(1.5, 1.5);

Thanks, that's already very helpful :)

Now I have added the code & class to the headline on this page, being displayed on mobile only.

Now the zoom-effect is showing as it was "looped". How can I modify it so that it will only zoom once?

Thank you in advance and kind regards,
Sascha

Hi Sascha,

How can I modify it so that it will only zoom once

Remove the infinitefrom this CSS:

.zoom-loop {
    animation: zoom-loop 2s ease-out infinite;
}

Awesome, thanks, Ying!

Last question: How to delay the zoom to start? E.g. I want the zoom to start 1.3 secs after the page has been refreshed, or loaded?

Thank you in advance and kind regards,
Sascha

You can add 1.3s to the CSS:

.zoom-loop {
    animation: zoom-loop 2s ease-out 1.3s;
}