Jquery : animate image on scroll

Question

I want to animate an image in specific part of page when page is scrolled to that area. Animation should be like this: when page loads that image is invisible and as we scroll down that image fadesIn and moves from right to left 100px .

this is what i did to get scroll position

jQuery(document).ready(function($){
 $('.myimages').hide();
 var target = $(".img-div").offset().top; 
 var interval = setInterval(function() {
  if ($(window).scrollTop() >=target)
   {                 
     $('.myimages').fadeIn();
   }
   }, 250);
  });

now instead of image fading in what i need to animate it as per above mentioned criteria i tried something like this

$('.myimages').animate({right:'100'}, 200);

but this did not work please help me with it

Answer 1

Instead of firing a setInterval every few seconds, you can bind it to the window 's scroll event.

$(window).scroll(function () {
  if ($(window).scrollTop() >= target)
    $('.myimages').fadeIn();
});

To animate the right and other similar CSS properties, you need to set the .image 's position to be something else than static .

$('.myimages').animate({
  right: 100
}, 200);

So, you need this in CSS:

.myimages {position: absolute;}

Working Snippet

 $(function () { $("img").hide(); $(window).scroll(function () { if ($(window).scrollTop() > $("img").scrollTop()) $("img").show().addClass("bounceInRight"); }); }); 

 .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: linear; animation-timing-function: linear; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); } 100% { -webkit-transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2000px); } 60% { opacity: 1; transform: translateX(-30px); } 80% { transform: translateX(10px); } 100% { transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } img {max-width: 100%;} 

 <script src="https://code.jquery.com/jquery-1.9.1.js"></script> <h1>Animation</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, unde amet a repellat tempora ipsum! Maiores minima sapiente blanditiis, asperiores necessitatibus corporis incidunt! Ex, praesentium aliquam omnis dicta quo. Quisquam.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero eius eligendi praesentium doloremque voluptatibus, vero sed aspernatur officia eum repellat unde dolore ut eaque esse, officiis natus harum vel eos.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta atque beatae temporibus et officiis enim, rem facere! Voluptatibus adipisci, odit in necessitatibus explicabo eveniet culpa. Nisi praesentium quasi error ducimus!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus autem facere ipsa ratione excepturi praesentium. Reiciendis aut praesentium earum laboriosam, architecto quasi error, corporis, nesciunt maxime distinctio quo nisi debitis.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati eos, consequatur voluptatibus harum deserunt! Fugit voluptatem veniam atque, odio aut qui iste laudantium, nemo error vero natus eaque unde sunt!</p> <p><img src="https://assets.keycdn.com/img/cdn-network.svg" alt="" class="animated" /></p>