Making a Thumbnail Circulate Animation with GSAP MotionPath

This experiment was impressed by a movement research shared by Rron Berisha. Whereas recreating the thought for the online, I grew to become desirous about how GSAP’s MotionPath plugin may very well be used to create fluid transitions between completely different gallery states utilizing only some management factors.

On this tutorial, we’ll construct a easy proof-of-concept picture gallery the place a stack of overlapping thumbnails expands right into a vertical picture strip that reveals a featured picture. The gallery itself isn’t meant to be totally purposeful. As a substitute, the purpose is to discover how a small quantity of motion-path logic can create a surprisingly natural transition.

The impact depends on GSAP’s MotionPath plugin, permitting every thumbnail to observe a curved trajectory quite than shifting immediately from one place to a different. By defining solely a few factors per picture, we are able to create movement that feels far more dynamic than a normal place tween.

HTML Construction

The HTML is deliberately minimal. We have now an open button, a featured picture container, and a set of thumbnail components.

Every thumbnail accommodates a picture and a numeric label. Initially, all thumbnails sit on prime of each other, forming a compact stack. As soon as the interplay is triggered, they unfold right into a vertical strip positioned beside the featured picture.

<button class="open__btn">+ Open</button>

<div class="big__featured__container">
  <button class="close__btn">Shut</button>
</div>

<div class="thumbnail">
  <p class="quantity">01</p>
  <div class="thumbnail__image">
    <img src="./public/img-1.webp" alt="" />
  </div>
</div>

Positioning the Thumbnail Strip

Earlier than animating something, we have to decide the place the thumbnails ought to find yourself. We measure one thumbnail, calculate its scaled dimensions, and decide the ultimate place of the vertical strip.

As a result of the thumbnails scale down through the animation, we have to compensate for the misplaced width when calculating the ultimate X place.

const scaledWidth = this.thumbnailRect.width * this.scale;

this.targetX =
  this.vw -
  this.thumbnailRect.proper +
  (this.thumbnailRect.width - scaledWidth) / 2;

Subsequent, we calculate a vertically centered place for the strip.

this.targetY =
  (
    this.vh -
    this.thumbnailRect.peak * this.scale +
    this.thumbnailRect.prime -
    this.hole * 2
  ) / 2;

This provides us the anchor place from which each thumbnail’s last location will probably be calculated.

Creating the Movement Path Animation

Essentially the most attention-grabbing a part of the impact occurs contained in the MotionPath configuration. Every thumbnail receives its personal vacation spot throughout the strip, however the motion itself is outlined by solely two factors.

First, we calculate the ultimate Y place for every thumbnail. The picture index determines its location throughout the strip.

const targetYItem =
  this.targetY -
  index * (this.thumbnailRect.peak * this.scale + this.hole);

As soon as we all know the ultimate vacation spot, we are able to outline the movement path itself.

return {
  path: [
    {
      x: this.targetX * 0.95,
      y: -targetYItem * 0.095,
      scale: (1 - this.scale) * 0.25 + this.scale,
    },
    {
      x: this.targetX,
      y: -targetYItem,
      scale: this.scale,
    },
  ],
  curviness: 0.45,
};

The second level represents the thumbnail’s last vacation spot within the strip. The primary level acts as a brief waypoint, making a delicate overshoot earlier than the picture settles into place.

What’s attention-grabbing is that each thumbnail shares the identical path definition, however every one receives a special last Y place. Due to that, GSAP generates barely completely different curves for each picture. The intermediate waypoint is calculated from every thumbnail’s last place. Because of this, thumbnails that finish additional down the strip are quickly displaced extra earlier than settling into place, producing bigger movement arcs.

The consequence feels far more natural than a normal place tween, despite the fact that the setup itself stays remarkably easy.

Constructing the Timeline

As soon as the trail is outlined, we are able to mix every thing right into a single GSAP timeline.

The open button fades away whereas the thumbnails journey towards their new positions.

this.tl = gsap.timeline({
  defaults: {
    length: 1.2,
    ease: 'expo.inOut',
    easeReverse: true,
  },
  paused: true,
});

this.tl.to(this.btnOpen, {
  opacity: 0,
  length: 0.5,
});

this.tl.to(
  this.thumbnails,
  {
    motionPath: (index) => {
      // ...
    },
    stagger: {
      from: 'begin',
      every: 0.02,
    },
  },
  '<'
);

On the similar time, the numeric labels animate into view.

this.tl.fromTo(
  this.numbers,
  {
    opacity: 0,
    yPercent: 50,
  },
  {
    opacity: 1,
    yPercent: 0,
    stagger: 0.045,
  },
  '<'
);

Lastly, the featured picture fades and scales into view.

this.tl.to(
  this.featuredContainer,
  {
    scale: 1,
    opacity: 1,
  },
  '<'
);

Conclusion

What makes this impact attention-grabbing is how little is definitely required to create it. A few motion-path factors and some easy measurements are sufficient to remodel a static stack of photos into one thing that feels far more alive.

The demo itself is deliberately easy, however the underlying concept could be pushed a lot additional by experimenting with completely different path shapes, stacking instructions, scales, and stagger configurations.

Don’t overlook to take a look at the opposite demo variations included within the mission. Whereas this demo begins from a stack of overlapping thumbnails and expands right into a vertical strip, a number of the different examples start with horizontal picture strips and discover fully completely different MotionPath configurations.

I hope this tutorial provides you just a few concepts to your personal GSAP MotionPath experiments. Thanks for studying 😃