Staff replied SP Page Builder

Ken Burns effect for images/carousel

Asked by Andreas Urban 5 years ago Last activity 1 year ago

Is there anything new about adding a Ken Burns effect for images and/or carousels?

(read at old messages about the request and adding to the request list - but could not find anything to set up at Page Builder)

thank you!

9 replies

Anne Staff

5 years ago

Hello Andreas Urban,

Thanks for contacting with us. We will inform the developer team about the issue and add in our feature list.

-Regards

Mehtaz Afsana Borsha Staff

5 years ago

Hi,

Sorry till now this effect is not added. We already add it on our request list. I hope DEV team will take care of it soon.

Thank you

Nils Heitmann

1 year ago

still not implemented ?

Mehtaz Afsana Borsha Staff

1 year ago

Thanks for contacting us. Our developers develop our features, and only management decides which features they will implement. Hope you understand.

Thanks.

Fabio Capponi

1 year ago

I agree with Andreas, it would be very usefull
Thanks
Fabio

Mehtaz Afsana Borsha Staff

1 year ago

Hi Fabio,

Thanks for your opinion. I will inform our team about it again. Could you please give me any example of it?

Fabio Capponi

1 year ago

Sure

Mehtaz Afsana Borsha Staff

1 year ago

Thanks for your demo, I will inform our DEV team about it with this demo. It helps our team to understand the feature properly.

Nils Heitmann

1 year ago

For all the the people, who need a working example right now, here you go:

.sp-slider .sp-item.active .sp-background{
  animation: zoom 25s; 
}

@keyframes zoom {
  from {
   transform: scale(1);
  }
  to {
  transform: scale(1.5);
  }
}

Just add the Code in a custom.css file, and you`re good.

You can change the animation time:

shorter (e.G. 20 sek) > effect is faster

longer (e.G. 30 sek) > effect is slower

It`s been over 3 years now since the original poster "Andreas" asked about this popular feature !
It´s a shame.

Fabio Capponi

1 year ago

@Nils

Thanks for your code
I'll try to set up it as you describe

Fabio

Paul Frankowski Senior Staff

1 year ago · edited

You can also improve CSS by using that instead:

.sp-slider .sp-item.active .sp-background {
    animation: kenburns 20s ease-in-out infinite; }

 @keyframes kenburns {
  0% {transform: scale(1) translate(0, 0);}
  100% {transform: scale(1.4) translate(-5%, -5%);}
}

The animation is infinite and alternates between the start and end states, creating a smooth back-and-forth effect. I also used ease-in-out - becuase then animation starts slowly, speeds up in the middle, and then slows down again at the end. This is a perfect fit for Ken Burns, because it simulates natural camera movement.

Customizations:

Adjust the scale values (e.g., 1.2 to 1.5) for a stronger zoom.
Modify the translate values for different pan directions (e.g., translate(-10%, -10%) for more movement).
Change the duration (e.g., 20s) to speed up or slow down the effect.