Ken burn effects in the slider

Feature Requests / Improvements
1

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

thank you

9 Likes
2

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?

3

It will be awesome if this effect exist in default slider

4

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

2 Likes
5

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;
}

2 Likes
6

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

7

Screen Shot 2023-11-04 at 11.22.34 AM

Screen Shot 2023-11-04 at 11.22.50 AM
Screen Shot 2023-11-04 at 11.22.50 AM1188×1116 92.1 KB

2 Likes
8

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

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

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

12

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

1 Like
13

Thanks @markballard :v:

14

When I use this, for some reason the slider will reset the slide scale before transitioning, so when the second image is zoomed in, right before it transitions, it jumps and resets to being zoomed out.

15

Yeah it’s not a perfect example as it was just a quick attempt to create a Ken Burns effect with CSS. You probably need to play around with the animation speed and scale settings to get it to work better for your use case.

16

I ended up finding a decent combo with the transition settings, works great for what I’m using.

Thanks for sharing this!

17

Cool! Can you share the settings that worked for you? I couldn’t figure out how to deal with the reverse setting so it always resets before advancing to the next slide.

18

This is what I ended up with actually: Website Example >

Not exactly ken burns at the moment, but I needed the nice slow transition. Sorry its not very helpful.

This is what I left off with CSS when I was working on it last time:

CSS

@keyframes scale-down {
  
  0% {
    
    opacity: 0;
  }

  50% {
   
    opacity: 1;
  }

}

@keyframes scale-up {
  
  0% {
    
    opacity: 0;
  }

  50% {
    
    opacity: 1;
  }

}

%root% .is-active:nth-of-type(odd) img{
	animation: scale-up 7s ease-in-out forwards;
}

%root% .is-active:nth-of-type(even) img{
	animation: scale-down 7s ease-in-out forwards;
}