Scrolling mouse – CSS animation examples

A delicate scrolling mouse animation will offer direction to the user after the initial land on a website. though this could be accomplished exploitation markup language parts and properties, we’re progressing to use SVG as this is often a lot of suited to drawing.

Inside our SVG we want a parallelogram with rounded corners and a circle for the part we’re progressing to animate, by exploitation SVG we are able to scale the icon to any size we want.

<svg class="mouse" xmlns="..." viewBox="0 0 76 130" preserveAspectRatio="xMidYmid meet">
  <g fill="none" fill-rule="evenodd">
  <rect width="70" height="118" x="1.5" y="1.5" stroke="#FFF" stroke-width="3" rx="36"/>
  <circle cx="36.5" cy="31.5" r="4.5" fill="#FFF"/>
  </g>
</svg>

Now we’ve created our SVG, we want to use some easy designs so as to regulate the dimensions and position of the icon among our instrumentality. We’ve wrapped a link round the mouse SVG and positioned it to very cheap of the screen.

.scroll-link {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}
.mouse {
  max-width: 2.5rem;
  width: 100%;
  height: auto;
}

Next, we’ll produce our animation. At zero and twenty percent of the method through our animation, we wish to line the state of our part because it begins. By setting it to twenty of the method though, it’ll keep still for a part of the time once perennial infinitely.

@keyframes scroll {
  0%, 20% {
  transform: translateY(0) scaleY(1);
  }
}

We need to feature within the opacity begin purpose then remodel each the Y position and therefore the vertical scale at the 100% mark, the top of our animation. The very last thing we want to try to drop the opacity so as to fade away from our circle.

@keyframes scroll {
  ...
  10% {
  opacity: 1;
  }
  100% {
  transform: translateY(36px) scaleY(2);
  opacity: 0.01;
  }
}

Finally, we tend to apply the animation to the circle, in conjunction with the ‘transform-origin’ property and therefore the will-change property to permit hardware acceleration. The animation properties area unit fairly obvious. The cubic-bezier temporal order perform is employed to initially pull the circle back before dropping it to very cheap of our mouse shape; this adds a cultish feel to the animation.

.scroll {
  animation-name: scroll;
  animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(0.650, -0.550, 0.250, 1.500);
  animation-iteration-count: infinite;
  transform-origin: 50% 20.5px;
  will-change: transform;
}

Demo | Download

Leave a Reply