Create stacked cards with 100vh height

[kresogalic]

Hello everyone, i am trying re-create a "service section" from this website https://vucko.co/approach

 

See the Pen OJdRGvB by kresogalic (@kresogalic) on CodePen

[mvaneijgen]

Hi @kresogalic check out this demo, seems really close to what you're looking for. Hope it helps and happy tweening! 

 

See the Pen qBJNvdw by mvaneijgen (@mvaneijgen) on CodePen

[kresogalic]

I am using next.js, here is the video of demo https://streamable.com/aqxe3u where you can see the problems i am facing and here is my code implementation:

 

'use client'

 

import React, { useLayoutEffect, useRef } from 'react'

import gsap from 'gsap'

import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'

import { StickyHighlight } from './Highlight'

import classes from './index.module.scss'

 

if (typeof window !== 'undefined') {

gsap.registerPlugin(ScrollTrigger)

}

 

export const StickyHighlights = ({ highlights }) => {

const containerRef = useRef(null)

 

useLayoutEffect(() => {

let panels = gsap.utils.toArray('.card')

 

panels.forEach((panel, i) => {

ScrollTrigger.create({

trigger: panel,

start: () =>

panel.offsetHeight < window.innerHeight ? 'top top' : 'bottom bottom', // if it's shorter than the viewport, we prefer to pin it at the top

pin: true,

pinSpacing: false,

})

})

}, [])

 

return (

<div className={classes.stickyHighlights} ref={containerRef}>

<div className={classes.stickyHighlightsInner}>

{highlights?.map((highlight, i) => (

<div className="card" key={i}>

<StickyHighlight index={i + 1} {...highlight} />

</div>

))}

</div>

</div>

)

}

[mvaneijgen]

We have Stackblitz starter templates for most of the frameworks, check out the once for React & Next, if you need help please make a minimal demo in one of these, please don't include your whole project. And make sure you read the following article how to work with React  (Next.js) and the gsap.context() to do proper cleanup otherwise you will have issues for sure!

[Rodrigo]

Hi,

 

As Mitchel mentions we have a few demos and starter templates in our Stackblitz React collection. In this particular one we have that effect:

https://stackblitz.com/edit/vitejs-vite-d73sck?file=src%2Fviews%2FLayers.jsx

 

In order to achieve the effect you're looking for you have to remove the onToggle callback and the second ScrollTrigger instance that snaps the sections, that will give you a stacking effect. The useLayoutEffect hook would look like this:

useLayoutEffect(() => {
  ctx.add(() => {
    const panels = gsap.utils.toArray('.panel');
    panels.forEach((panel, i) => {
      ScrollTrigger.create({
        trigger: panel,
        start: 'top bottom',
        end: '+=200%',
        // markers: { startColor: "white", endColor: "fuchsia", indent: 250 * i },
        // id: 'panel-' + i,
      });
    });
  });
  return () => ctx.revert();
}, []);

Hopefully this is enough to get you started.

Happy Tweening!