Ken burn effects in the slider

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

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

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

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

1 Like

I’m happy it worked for you! :slight_smile:

1 Like