Recreating Palmer’s Draggable Product Grid with GSAP

Probably the greatest methods to be taught is by recreating an interplay you’ve seen out within the wild and constructing it from scratch. It pushes you to note the small particulars, perceive the logic behind the animation, and strengthen your problem-solving abilities alongside the way in which.

So right now we’ll dive into rebuilding the sleek, draggable product grid from the Palmer web site, initially crafted by Unusual with Kevin Masselink, Alexis Sejourné, and Dylan Brouwer. The aim is to know how this type of interplay works beneath the hood and code the fundamentals from scratch.

Alongside the way in which, you’ll learn to construction a versatile grid, implement draggable navigation, and add clean scroll-based motion. We’ll additionally discover methods to animate merchandise as they enter or depart the viewport, and end with a sophisticated product element transition utilizing Flip and SplitText for dynamic textual content reveals.

Let’s get began!

Grid Setup

The Markup

Let’s not attempt to be authentic and, as at all times, begin with the fundamentals. Earlier than we get into the animations, we want a transparent construction to work with — one thing easy, predictable, and straightforward to construct upon.

What we have now here’s a .container that fills the viewport, within which sits a .grid divided into vertical columns. Every column stacks a number of .product components, and each product wraps round a picture. It’s a minimal setup, nevertheless it lays the inspiration for the draggable, animated expertise we’re about to create.

The Fashion

Now that we’ve bought the construction, let’s add some styling to make the grid usable. We’ll maintain issues simple and use Flexbox as a substitute of CSS Grid, since Flexbox makes it simpler to deal with vertical offsets for alternating columns. This strategy retains the structure versatile and prepared for animation.

.container {
  place: fastened;
  width: 100vw;
  top: 100vh;
  prime: 0;
  left: 0;
}

.grid {
  place: absolute;
  show: flex;
  hole: 5vw;
  cursor: seize;
}

.column {
  show: flex;
  flex-direction: column;
  hole: 5vw;
}

.column:nth-child(even) {
  margin-top: 10vw;  
}

.product {
  place: relative;
  width: 18.5vw;
  aspect-ratio: 1 / 1;

  div {
    width: 18.5vw;
    aspect-ratio: 1 / 1;
  }

  img {
    place: absolute;
    width: 100%;
    top: 100%;
    object-fit: include;
  }
}

Animation

Okay, setup’s out of the way in which — now let’s soar into the enjoyable half.

When creating interactive experiences, it helps to interrupt issues down into smaller components. That method, each bit might be dealt with step-by-step with out feeling overwhelming.

Right here’s the construction I adopted for this venture:

1 – Introduction / Preloader
2 – Grid Navigation
3 – Product’s element view transition

Introduction / Preloader

First, the grid isn’t centered by default, so we’ll repair that with a small utility perform. This makes certain the grid at all times sits neatly in the midst of the display, regardless of the viewport dimension.

centerGrid() {
  const gridWidth = this.grid.offsetWidth
  const gridHeight = this.grid.offsetHeight
  const windowWidth = window.innerWidth
  const windowHeight = window.innerHeight

  const centerX = (windowWidth - gridWidth) / 2
  const centerY = (windowHeight - gridHeight) / 2

  gsap.set(this.grid, {
    x: centerX,
    y: centerY
  })
}

Within the authentic Palmer reference, the expertise begins with merchandise showing one after the other in a barely random order. After that reveal, the entire grid easily zooms into place.

To maintain issues easy, we’ll begin with each the container and the merchandise scaled right down to 0.5 and the merchandise absolutely clear. Then we animate them again to full dimension and opacity, including a random stagger so the pictures pop in at barely completely different instances.

The result’s a dynamic however light-weight introduction that units the tone for the remainder of the interplay.

intro() {
  this.centerGrid()

  const timeline = gsap.timeline()

  timeline.set(this.dom, { scale: .5 })
  timeline.set(this.merchandise, {
    scale: 0.5,
    opacity: 0,
  })

  timeline.to(this.merchandise, {
    scale: 1,
    opacity: 1,
    length: 0.6,
    ease: "power3.out",
    stagger: { quantity: 1.2, from: "random" }
  })
  timeline.to(this.dom, {
    scale: 1,
    length: 1.2,
    ease: "power3.inOut"
  })
}

Grid Navigation

The grid appears good. Subsequent, we want a approach to navigate it: GSAP’s Draggable plugin is simply what we want.

setupDraggable() {
  this.draggable = Draggable.create(this.grid, {
    kind: "x,y",
    bounds: {
      minX: -(this.grid.offsetWidth - window.innerWidth) - 200,
      maxX: 200,
      minY: -(this.grid.offsetHeight - window.innerHeight) - 100,
      maxY: 100
    },
    inertia: true,
    allowEventDefault: true,
    edgeResistance: 0.9,
  })[0]
}

It might be nice if we may add scrolling too.

window.addEventListener("wheel", (e) => {
  e.preventDefault()

  const deltaX = -e.deltaX * 7
  const deltaY = -e.deltaY * 7

  const currentX = gsap.getProperty(this.grid, "x")
  const currentY = gsap.getProperty(this.grid, "y")

  const newX = currentX + deltaX
  const newY = currentY + deltaY

  const bounds = this.draggable.vars.bounds
  const clampedX = Math.max(bounds.minX, Math.min(bounds.maxX, newX))
  const clampedY = Math.max(bounds.minY, Math.min(bounds.maxY, newY))

  gsap.to(this.grid, {
    x: clampedX,
    y: clampedY,
    length: 0.3,
    ease: "power3.out"
  })
}, { passive: false })

We are able to additionally make the merchandise seem as we transfer across the grid.

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.goal === this.currentProduct) return
    if (entry.isIntersecting) {
      gsap.to(entry.goal, {
        scale: 1,
        opacity: 1,
        length: 0.5,
        ease: "power2.out"
      })
    } else {
      gsap.to(entry.goal, {
        opacity: 0,
        scale: 0.5,
        length: 0.5,
        ease: "power2.in"
      })
    }
  })
}, { root: null, threshold: 0.1 })

Product’s element view transition

Whenever you click on on a product, an overlay opens and shows the product’s particulars.
Throughout this transition, the product’s picture animates easily from its place within the grid to its place contained in the overlay.

We construct a easy overlay with minimal construction and styling and add an empty

  
  

    
    

      
Lorem ipsum dolor, sit amet consectetur adipisicing elit...
    
  

.particulars {
  place: absolute;
  prime: 0;
  left: 0;
  width: 50vw;
  top: 100vh;
  padding: 4vw 2vw;
  background-color: #FFF;

  remodel: translate3d(50vw, 0, 0);
}

.details__thumb {
  place: relative;
  width: 25vw;
  aspect-ratio: 1 / 1;
  z-index: 3;
  will-change: remodel;
}

/* and so forth */

showDetails(product) {
  gsap.to(this.dom, {
    x: "50vw",
    length: 1.2,
    ease: "power3.inOut",
  })

  gsap.to(this.particulars, {
    x: 0,
    length: 1.2,
    ease: "power3.inOut",
  })

  this.flipProduct(product)
}

flipProduct(product) {
  this.currentProduct = product
  this.originalParent = product.parentNode

  if (this.observer) {
    this.observer.unobserve(product)
  }

  const state = Flip.getState(product)
  this.detailsThumb.appendChild(product)

  Flip.from(state, {
    absolute: true,
    length: 1.2,
    ease: "power3.inOut",
  });
}

const splitTitles = new SplitText(this.titles, {
  kind: "traces, chars",
  masks: "traces",
  charsClass: "char"
})

const splitTexts = new SplitText(this.texts, {
  kind: "traces",
  masks: "traces",
  linesClass: "line"
})

gsap.to(splitTitles.chars, {
  y: 0,
  length: 1.1,
  delay: 0.4,
  ease: "power3.inOut",
  stagger: 0.025
});

gsap.to(splitTexts.traces, {
  y: 0,
  length: 1.1,
  delay: 0.4,
  ease: "power3.inOut",
  stagger: 0.05
});