Ken burn effects in the slider

[rdc_webdev]

it would be nice if we have this feature with the slider.

thank you

[Chris22]

Maybe it can be done with some clever CSS. I have not yet managed to find the appropriate CSS class.

Is there a pro who can help?

[mnhalrj]

It will be awesome if this effect exist in default slider

[phillencolin]

Maybe you can find a snippet here… https://animista.net/

[markballard]

Until they add it to the slider you can just add some custom css you can add on the slider element

@keyframes scale-down {
from { transform: scale(1.2) }
to { transform: scale(1) }
}

@keyframes scale-up {
from { transform: scale(1) }
to { transform: scale(1.2) }
}

%root% .is-active:nth-of-type(odd) img{
animation: scale-down 5s linear forwards;
}

%root% .is-active:nth-of-type(even) img{
animation: scale-up 5s linear forwards;
}

[MikeG]

Hey @markballard . Where to put this CSS code? Please post a screenshot

[markballard]

[mnhalrj]

Thanks @markballard for helping
i tried your code but no luck
maybe i am messing something

[markballard]

I exported the template as a json file so you can import and play around with

[mnhalrj]

Message from dropbox
This item was deleted
Can you share it via https://wetransfer.com
Thanks in advanced

[markballard]

My bad I made a change and uploaded again but copied the wrong link

template-ken-burns-slider-2023-11-10.json

[mnhalrj]

Thanks @markballard