How to animate sharing on hover

Question

How to animate sharing on hover

I am trying to enliven the exchange of images when hovering over different elements on the page. I am using GSAP for now, but will be open to a simpler solution using jQuery or just CSS, if possible.

I already know that I'm wrong, given how much code I wrote for this. There should be a simpler solution (and it doesn't even work, it is).

Here is what I have so far so that you understand what I'm trying to accomplish:

http://codepen.io/jakatz/pen/GorLZb

This is the javascript / gsap code:

$(document).ready(function() {
  var image1 = document.querySelector('#image1');
  var image2 = document.querySelector('#image2');
  var image3 = document.querySelector('#image3');
  var activeImage = document.querySelector('.image-container .active');

  $('.item1').hover(function() {
    TweenMax.to(image1, 0.5, {
      left: 0
    });

    TweenMax.to(activeImage, 0.5, {
      left: 1500,
      onComplete: function() {
         $('.image').removeClass('active');
         $('#image1').addClass('active');

         activeImage = document.querySelector('.image-container .active');
      }
    });
  });


  $('.item2').hover(function() {
    TweenMax.to(image2, 0.5, {
    left: 0
  });

    TweenMax.to(activeImage, 0.5, {
      left: 1500,
      onComplete: function() {
        $('.image').removeClass('active');
        $('#image2').addClass('active');

        activeImage = document.querySelector('.image-container .active');
      }  
    });
  });


  $('.item3').hover(function() {
    TweenMax.to(image3, 0.5, {
      left: 0
    });

    TweenMax.to(activeImage, 0.5, {
      left: 1500,
      onComplete: function() {
        $('.image').removeClass('active');
        $('#image3').addClass('active');

        activeImage = document.querySelector('.image-container .active');
      }
    });
  });
});

This works for the most part, until you move a new element before the end of the previous animation ... this will break it. Any help would be greatly appreciated!

+4

jquery css animation greensock tweenmax

jonathan.a.katz Jan 4 '16 at 19:32

1

Marko Mackic · Accepted Answer · 2016-01-04T20:44:46+0000

css jquery, css:

html,body{
width:100%;
height:100%;
overflow:hidden;


 }
  .box {
    display:inline-block;
    height: 100px;
    width: 100px;
    margin: 10px;
    border: 1px solid black;

  }
  .image{
    width:100px;
    height:100px;
    position:absolute;
    left:2500px;
    -webkit-transition: all 0.5s; /* Safari */
    transition: all 0.5s;
  }
  .image.active{
    left:0px;
  }
  .box:hover{
    background:blue;
  }

jquery ( , , ):

$('.box').hover(function(){
    id = $(this).attr('id');
    if(id === "1"){
        $('#im1').addClass('active');
        $('#im2').removeClass('active');
        $('#im3').removeClass('active');
    }else if(id === "2"){
        $('#im1').removeClass('active');
        $('#im2').addClass('active');
        $('#im3').removeClass('active');
    }else if(id === "3"){
        $('#im1').removeClass('active');
        $('#im2').removeClass('active');
        $('#im3').addClass('active');
    }
})

html:

<body>
 <div class="container">
  <div id="1" class="box">
    Item 1
  </div>

  <div id="2" class="box">
    Item 2
  </div>

  <div id="3" class="box">
    Item 3
  </div>
 </div>
<div class="image-container">

   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png" id="im1" class="image active">
   <img src="http://1.bp.blogspot.com/-n4re1AOb5x0/U-WP0ppwr5I/AAAAAAAALhY/QgFS0Bmp6Ug/s1600/cute-wink-smiley.png" id="im2" class="image">
   <img src="https://s-media-cache-ak0.pinimg.com/736x/4e/5c/f7/4e5cf7d4ccb9c59b6620a9c71944d51e.jpg" id="im3" class="image">
 </div>
</body>

: https://jsfiddle.net/s1q6L9vc/2/

How to animate sharing on hover

More articles: