Ken burn effects in the slider

Feature Requests / Improvements
22

This makes a sliver of another slide show if I scroll to the next slide mid-effect. Donā€™t know how to fix that. I am out of time for this project. :slight_smile:

 @-webkit-keyframes kenburns {
     0% {
         -webkit-transform: scale(1) translate(0, 0);
         transform: scale(1) translate(0, 0);
         -webkit-transform-origin: 84% 84%;
         transform-origin: 84% 84%;
    }
     50% {
         -webkit-transform: scale(1.25) translate(20px, 15px);
         transform: scale(1.25) translate(20px, 15px);
         -webkit-transform-origin: right bottom;
         transform-origin: right bottom;
    }
     100% {
         -webkit-transform: scale(1) translate(0, 0);
         transform: scale(1) translate(0, 0);
         -webkit-transform-origin: 84% 84%;
         transform-origin: 84% 84%;
    }
}
 @keyframes kenburns {
     0% {
         -webkit-transform: scale(1) translate(0, 0);
         transform: scale(1) translate(0, 0);
         -webkit-transform-origin: 84% 84%;
         transform-origin: 84% 84%;
    }
     50% {
         -webkit-transform: scale(1.25) translate(20px, 15px);
         transform: scale(1.25) translate(20px, 15px);
         -webkit-transform-origin: right bottom;
         transform-origin: right bottom;
    }
     100% {
         -webkit-transform: scale(1) translate(0, 0);
         transform: scale(1) translate(0, 0);
         -webkit-transform-origin: 84% 84%;
         transform-origin: 84% 84%;
    }
}


%root% .is-active:nth-of-type(odd).splide__slide {
	animation: kenburns 60s ease-out both;
  	animation-iteration-count: infinite;
}

%root% .is-active:nth-of-type(even).splide__slide {
	animation: kenburns 60s ease-out both;
 	animation-iteration-count: infinite;
}
23

Yea, I tried something like that as well and noticed that, too! Thanks for your effort though! :slight_smile:

24

If you add a Container to the slide and make it a flexbox, Height: 100%, and set the background image on it, it works just fine.

Assign a class to the Container in each Slide, like ā€œslide-contentā€ and target that like:

%root% .is-active:nth-of-type(odd) .slide-content {
	animation: kenburns 60s ease-out both;
  	animation-iteration-count: infinite;
}

%root% .is-active:nth-of-type(even) .slide-content {
	animation: kenburns 60s ease-out both;
  	animation-iteration-count: infinite;
}

However, If you put any elements into the Container, they will scale with the effect. You can put another Container below it, containing some elements, position: relative, bottom: 50% and the elements wonā€™t scale with the effect.

You can download a section template here on this demo page:

1 Like
25

Thanks so much!!! This works perfectly!! :heart:

1 Like
26

Iā€™m happy it worked for you! :slight_smile:

1 Like
27

Nice effect! I noticed it doesnā€™t work when youā€™re displaying more than 1 slide in the slider; only the first item gets the effect.

28

How do you mean? It does work for every slide in the slider.
Can you doublecheck your CSS? There has to be an issue on your end cause for me it definitely works! IĀ“ve used this method on 2 different sites already and it works on both so I can 100% confirm that the shared method works perfectly!

29

Ken Burns effect is required for a slider. I hope it will be available at the core without additional work being required.

30

No, it only works on the first slider. Or I should say: the first slider that is in the viewport. When you set to display 3-4 sliders, only the first slider has the effect.

31

I guess this is just a communication problemā€¦ In your post from 11 days ago you wrote:

Nice effect! I noticed it doesnā€™t work when youā€™re displaying more than 1 slide in the slider; only the first item gets the effect.

and I wrote that it DOES indeed work for every slide in the slider, which is correct!

Testsite:

The first slider on that page has a total of 9 slides and the effect DOES work for all 9 slides.

However, what I CAN confirm is that it doesnĀ“t work if you have multiple Slider (NOT Slides!) on the Website. THEN the first Slider only gets the effect.

So Slider ā‰  Slide! :slight_smile:

Edit:

It seems that the Ken Burns effect works properly for multiple Slider when you add the adjustments to the Custom CSS of the page rather than the Custom CSS of the individual sliders.

Hereā€™s the working code I used:

/* Ken-Burns effect for the first slider */
@keyframes kenburns1 {
    0% {
        transform: scale(1) translate(0, 0);
        transform-origin: 84% 84%;
    }
    50% {
        transform: scale(1.25) translate(20px, 15px);
        transform-origin: right bottom;
    }
    100% {
        transform: scale(1) translate(0, 0);
        transform-origin: 84% 84%;
    }
}

/* Applying the Ken-Burns effect to the first slider */
%root% .is-active .slide-content {
    animation: kenburns1 60s ease-out both;
    animation-iteration-count: infinite;
    position: relative;
}

/* Ken-Burns effect for the second slider */
@keyframes kenburns2 {
    0% {
        transform: scale(1) translate(0, 0);
        transform-origin: 50% 50%;
    }
    50% {
        transform: scale(1.25) translate(-20px, -15px);
        transform-origin: left top;
    }
    100% {
        transform: scale(1) translate(0, 0);
        transform-origin: 50% 50%;
    }
}

/* Applying the Ken-Burns effect to the second slider */
#brxe-cpyqyc .is-active .slide-content {
    animation: kenburns2 60s ease-out both !important;
    animation-iteration-count: infinite;
    position: relative;
}
32

I can only see the first slide on your example, I cannot see if the effect works on the other slides.

My slider shows 3-4 slides at the same time; the effect only works on the first one.

But your idea works: I moved the CSS from the slider to the wrapper container, and now they all have the effect. Excellent!