CSS: How to don't reset onhover animation on every hover

Question

I have a simple on-hover CSS animation which makes slide transition between images.

When the user makes the hover on SECTION ONE and before the animation ends make hover on SECTION two, animation restart and make lagging move.

MY CODE:

var $circle = $('#circle');

function moveCircle(e) {
    TweenLite.to($circle, 0.8, {
    css: {
      left: e.pageX,
      top: e.pageY
    }
  });
}

$(window).on('mousemove', moveCircle);

@import "compass/css3";

@keyframes in {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}
@keyframes out {
    from {
        transform: translateY(0);
    }
    to {
       transform: translateY(100%);
    }
}

html {
  background: #0E3741;
}

#circle {
  position: absolute;
  pointer-events : none;
  width: 400px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -50px;
}

#circle .circle-wrapper {
    overflow: hidden;
    width: 400px;
    height: 200px;
    position: relative;
  }
  
#circle img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 400px;
    height: 200px;
    object-fit: cover;
    overflow: hidden;
  }

#wrapper {
  display: flex;
  flex-direction: column;
}

.special-element {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#one {
  background: blue;
}

#two {
  background: red;
}

#one:hover ~ #circle .circle-wrapper #imgOne {
  animation: in 1s ease-in-out;
  z-index: 2;
}

#one:hover ~ #circle .circle-wrapper #imgTwo {
  animation: out 1s ease-in-out;
}

#two:hover ~ #circle .circle-wrapper #imgTwo {
  animation: in 1s ease-in-out;
  z-index: 2;
}

#two:hover ~ #circle .circle-wrapper #imgOne {
  animation: out 1s ease-in-out;
}





  
    section one
  

  
    section two

Is there any solution how I can prevent this lagging issue?

Maybe is there any solution to how I can solve it and make this animation smooth?

I'm looking for something like animation on this website.

user_1294283 · Answer

Updated version

You can do a simplified version of it with gsap. It is probably best not to mix plain css too much with the gsap, unless you use css inside the gsap library. Because gsap will manipulate some of the props. E.g. the transformation. And it is better to use transform than just left/top because it is hardware accelerated.

I've done some improvements to the code I've posted before. It looks smoother now. In addition, I have added a little zoom and horizontal-shift effect - similar to the animation on the referenced website. Also, the animation now starts from the bottom.

The animation is really well done on the referenced page. It is done with WebGL. This is not your every-day animation and requires quite a bit of effort to make it work - at least for someone who is not a designer. It uses a 3d transformation matrix and some other effects together.





  
  
  
  
  



  
    section 1
    section 2

Old answer

I have been playing around a little bit with the gsap library today. I've honestly never done anything with or like it. Tried to do it with the x and y params that you may pass to gsap. It will take care of the transformations - also the TimeLine stuff
is quite handy. The result is not that great, also the animations look like it could be done better, but maybe it might still help you out. You could also improve some of the logic and animation probably. At least it runs quite stable - performance wise.





  
  
  
  
  



  
    section 1
    section 2

user_15405454 · Answer

I think that problem is because "moving circle function". Moving dom element with Left and right is not good for performance. You should move the circle with "transform". transform runs with GPU acceleration and it performs better and make move smooth.

Try this code.

function moveCircle(e) {
    TweenLite.to($circle, 0.8, {
    css: {
      transform: `translate(${e.pageX}px, ${e.pageY}px)`
    }
  });
}

Try this code.

function moveCircle(e) {
    TweenLite.to($circle, 0.8, {
    css: {
      transform: `translate(${e.pageX}px, ${e.pageY}px)`
    }
  });
}

user_436560 · Answer

Yes, there is, by modifying the value of the second parameter of TweenLite.to, because that's the duration, see more here: http://www.tud.ttu.ee/im/Jaak.Henno/FlashDevelop/greensock-as3/greensock-as3/docs/com/greensock/TweenLite.html#to()

var $circle = $('#circle');

function moveCircle(e) {
    TweenLite.to($circle, 0.1, {
    css: {
      left: e.pageX,
      top: e.pageY
    }
  });
}

$(window).on('mousemove', moveCircle);

@import "compass/css3";

@keyframes in {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}
@keyframes out {
    from {
        transform: translateY(0);
    }
    to {
       transform: translateY(100%);
    }
}

html {
  background: #0E3741;
}

#circle {
  position: absolute;
  pointer-events : none;
  width: 400px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -50px;
}

#circle .circle-wrapper {
    overflow: hidden;
    width: 400px;
    height: 200px;
    position: relative;
  }
  
#circle img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 400px;
    height: 200px;
    object-fit: cover;
    overflow: hidden;
  }

#wrapper {
  display: flex;
  flex-direction: column;
}

.special-element {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#one {
  background: blue;
}

#two {
  background: red;
}

#one:hover ~ #circle .circle-wrapper #imgOne {
  animation: in 1s ease-in-out;
  z-index: 2;
}

#one:hover ~ #circle .circle-wrapper #imgTwo {
  animation: out 1s ease-in-out;
}

#two:hover ~ #circle .circle-wrapper #imgTwo {
  animation: in 1s ease-in-out;
  z-index: 2;
}

#two:hover ~ #circle .circle-wrapper #imgOne {
  animation: out 1s ease-in-out;
}





  
    section one
  

  
    section two

user_15273968 · Answer

The website is using canvas for the moving slideshow and they've used webgl for the smooth kind of reveal effects.

We can create similar reveal effect using simple animation and z-index manipulation:

var $cursor = $('#cursor');

function movecursor(e) {
  TweenLite.to($cursor, 0.8, {
    css: {
      left: e.pageX,
      top: e.pageY
    }
  });
}
$(window).on('mousemove', movecursor);

let topImg = null;
$('.special-element').mouseenter((e) => {
  //make all images at same level
  $('.img-wrapper').css({ zIndex: '1' });

  //make last focused image at second highest level
  if (topImg) topImg.css({ zIndex: '2' });

  //make current image as topImage 
  let atr = $(e.target).attr('data-img');
  topImg = $('.img-wrapper[data-img="' + atr + '"]');
  //make it topmost
  topImg.css({ zIndex: '3' });
});

:root {
  --cursor-img-height: 30vh;
  --cursor-img-width: 30vw;
}

html,
body {
  background: #0E3741;
}

#wrapper {
  display: flex;
  flex-direction: column;
}

.special-element {
  width: 100%;
  height: 33vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}

.special-element:nth-child(1) {
  background: lightblue;
}

.special-element:nth-child(2) {
  background: lightcoral;
}

.special-element:nth-child(3) {
  background: lightgreen;
}

#cursor {
  position: absolute;
  pointer-events: none;
  margin: 0;
  margin-top: calc(var(--cursor-img-height) * -0.5);
  margin-left: calc(var(--cursor-img-width) * -0.5);
  overflow: hidden;
  width: var(--cursor-img-width);
  height: var(--cursor-img-height);
}

.img-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--cursor-img-width);
  height: var(--cursor-img-height);
  overflow: hidden;
}

.img-wrapper>img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--cursor-img-width);
  height: var(--cursor-img-height);
  object-fit: fill;
  z-index: 1;
}

.special-element[data-img="one"]:hover~#cursor [data-img="one"],
.special-element[data-img="two"]:hover~#cursor [data-img="two"],
.special-element[data-img="three"]:hover~#cursor [data-img="three"] {
  animation: slide .8s ease-in-out;
}

@keyframes slide {
  from {
    height: 0px;
    transform: scale(1.2);
  }
  to {
    height: (--cursor-img-height);
    transform: scale(1);
  }
}





  food
  animal
  night

View in full page mode.

CSS: How to don't reset onhover animation on every hover

4 Answers

Updated version

Old answer