CSS Image Transitions on Scroll

September 23, 2022

In this Elementor tutorial I will show you how to add CSS transitions to your images on scroll.

This tutorial will be using some lightweight JavaScript and CSS code, so this will be a little more advanced of a tutorial. But don’t worry I will walk you through everything and explain how things work as we go.

CSS Transition Website:
https://www.transition.style/

Timestamps:

  • 0:00 Introduction
  • 1:32 Assign CSS Classes
  • 3:09 Add JavaScript Code
  • 6:51 Add CSS Code

JavaScript Code:

				
					<script>jQuery(function($){
    $(window).scroll(function() {
  var $window = $(window),

      $panel1 = $('.panel1');
      $panel2 = $('.panel2');
      $panel3 = $('.panel3');
      $image1 = $('.image1');
      $image2 = $('.image2');
      $image3 = $('.image3');
     
  var scroll = $window.scrollTop() + ($window.height() / 2);

  $panel1.each(function () {
    var $this = $(this);
    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
      $image1.addClass("imagewipe");
    }
  });
  
    $panel2.each(function () {
    var $this = $(this);
    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
      $image2.addClass("hesitate");
    }
  });
  
      $panel3.each(function () {
    var $this = $(this);
    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
      $image3.addClass("circlegrow");
    }
  });
  // wickydesign.com
}).scroll();
});</script>
				
			

CSS Code:

				
					@keyframes wipe-in-up {
  to {
    clip-path: inset(0 0 0 0);
  }
}

.imagewipe {
  animation: 5s cubic-bezier(.25, 1, .30, 1) wipe-in-up both;
}

@keyframes square-in-hesitate {
  40% {
    clip-path: inset(33% 33% 33% 33%);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}
.hesitate {
  animation: 1s cubic-bezier(.25, 1, .30, 1) square-in-hesitate both;
}

@keyframes circle-in-center {
  
  to {
    clip-path: circle(100%);
  }
}

.circlegrow {
  animation: 20s cubic-bezier(.25, 1, .30, 1) circle-in-center both;
}
				
			

*Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

Share this post:

Facebook
Reddit
Twitter
Pinterest
LinkedIn
Email

More Free Resources