pin spacer height issues

[Lk kumar]

Description:
Hey folks, I’m trying to make a horizontal scroll section using GSAP ScrollTrigger.

What I have:

• I’m pinning .slider-wrapper-container while scrolling .journey-slider-wrapper.

• I have 3 cards: .journey-card-1, .journey-card-2, .journey-card-3.

• Each card should slide in as you scroll, one after another.

• also want to stack each other card to top overlap type

The problem:
1️⃣ The pinned section is adding way too much blank space at the bottom of the page.
2️⃣ The scroll works for the first card, but the other cards don’t animate in/out correctly — they kinda overlap or just don’t show.

What I expect:

• The section should stay pinned for the duration of all 3 cards transitioning in/out smoothly.

• No weird extra blank space after the pinned section.

See the Pen EaVyBoe by Lavkesh-Kumar-the-selector (@Lavkesh-Kumar-the-selector) on CodePen.

[Rodrigo]

Hi @Lk kumar and welcome to the GSAP Forums!

 

Is hard to tell but perhaps some of the styles being used by tailwind and another CSS file you're loading could be the issue or the classes you're adding to the elements. Unfortunately there is far too much HTML in your demo for us to go through all of it trying to find where the issue could be, we don't have the time resources for that and is beyond the scope of the help we provide in these free forums.

 

Perhaps these demos with fairly simple styles can help getting an idea of how to create something like this:

See the Pen poGzBpB by GreenSock (@GreenSock) on CodePen.

 

See the Pen bGzZqBv by GreenSock (@GreenSock) on CodePen.

 

Finally you might want to have a look at this thread by @mvaneijgen on the stacking cards subject:

 

Hopefully this helps

Happy Tweening!

[Lk kumar]

this is my seprate file

 

<template>

<section class="card-wrapper">

<template v-for="(card, index) in cards" :key="card.id">

<FlairJourneyCard :card="card" :image-pos="imagePos" :class="`journey-card-${index + 1}`" />

</template>

</section>

</template>

 

<script setup lang="ts">

import gsap from 'gsap'

 

const props = defineProps({

cards: {

type: Array as unknown as PropType<agentCard[]>,

required: true,

},

imagePos: {

type: String as PropType<'center' | 'bottom'>,

default: 'center',

},

sliderWrapper: {

type: Object as PropType<HTMLDivElement | null>,

required: true,

},

pageType: {

type: String as PropType<'flair' | 'home'>,

default: 'home',

},

})

 

onMounted(async () => {

await nextTick()

const ScrollTrigger = (await import('gsap/ScrollTrigger')).default

gsap.registerPlugin(ScrollTrigger)

 

const lastElement = props.pageType == 'flair' ? '.journey-card-3' : '.journey-card-2'

const pinTarget = document.querySelector('.slider-wrapper-container')

 

const timeline = gsap.timeline({

scrollTrigger: {

trigger: props.sliderWrapper,

end: `+=${pinTarget?.clientHeight}`,

scrub: 1,

anticipatePin: 1,

pinType: "fixed",

pin: ".slider-wrapper-container",

pinSpacing: true,

start: 'top top',

markers: true,

endTrigger: lastElement,

},

})

 

props.cards.forEach((_, i) => {

const current = `.journey-card-${i + 1}`

const next = `.journey-card-${i + 2}`

 

// Card IN

timeline.fromTo(

current,

{ xPercent: i === 0 ? 0 : 75, opacity: i === 0 ? 1 : 0 },

{ xPercent: 0, opacity: 1, scale: 0.99 }

)

 

// Fade previous

if (i > 0) {

timeline.to(

`.journey-card-${i}`,

{ xPercent: 0.5, opacity: 0.5, scale: 0.98 },

'<'

)

}

})

})

</script>

 

<style>

.card-wrapper {

position: relative;

height: 100vh;

overflow: hidden;

}

 

.pin-spacer {

background-color: gray;

}

</style>

[Lk kumar]

This is my component 


please can you help me for this 


currently im working this in my nuxt vue project 


 

<template>

<div class="relative pt-4 sm:pt-6 xl:pt-16 slider-wrapper-container">

<div ref="sliderWrapper" class="sticky top-0 journey-slider-wrapper">

<div class="flex lg:flex-row flex-col justify-center items-center gap-4 lg:gap-20">

<div class="relative flex flex-col gap-y-10 order-2 lg:order-1">

<div class="z-10 relative flex flex-col items-center gap-y-4">

<h1

class="font-bold text-heading-medium text-neutral-900 md:text-heading-medium lg:text-heading-large xl:text-display-medium sm:heading-small"

v-html="heading(content.title)"

/>

<div class="flex flex-wrap justify-center gap-2">

<FlairSteps

v-for="(step, stepIndex) in content.steps"

:key="step.id"

:step="step"

:step-index="stepIndex"

:steps="content.steps"

/>

</div>

<p class="text-body-small md:text-body-large text-center text-neutral-500">

{{ content.description }}

</p>

</div>

</div>

</div>

<div class="mt-10 container">

<FlairOverlapContainer

:cards="Array.isArray(content.cards) ? content.cards : [content.cards]"

image-pos="center"

:slider-wrapper="sliderWrapper"

page-type="flair"

/>

</div>

</div>

</div>

</template>

 

<script lang="ts" setup>

const { heading } = useNormalizer()

defineProps({

content: {

type: Object as PropType<FlairJourney>,

required: true,

},

inView: {

type: Boolean,

default: false,

},

})

 

const sliderWrapper = ref<HTMLDivElement | null>(null)

</script>

 

<style scoped>

/* .journey-slider-wrapper {

flex-flow: column;

justify-content: center;

align-items: center;

flex-direction: column;

height: 100vh;

display: flex;

} */

</style>

[GSAP Helper]

Hi,

 

Unfortunately those code snippets don't really tell us what the issue could be, without a minimal demo (emphasis on minimal), it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import GSAP as shown in the Install Helper in our Learning Center : 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Lk kumar]

https://stackblitz.com/edit/nuxt-starter-q64za7mz?file=components%2FContainer.vue

Please check this, sorry for late reply

[Rodrigo]

Hi,

 

I'm not sure I follow what you're trying to achieve here, perhaps something like this:

See the Pen ByoQQEb by GreenSock (@GreenSock) on CodePen.

 

If not please be more specific about what is that you're trying do so we can have a better idea and give better suggestions.

 

Hopefully this helps

Happy Tweening!

[Lk kumar]

See the Pen vENMzEv by Lavkesh-Kumar-the-selector (@Lavkesh-Kumar-the-selector) on CodePen.

[Lk kumar]

Sir please check i want normal vertical transtion not horizontal 

but issue is when i adding pinSpacing then its adding much padding after last card

[Rodrigo]

Hi,

 

I forked my previous demo and modified to use a vertical animation:

See the Pen OPyGYev by GreenSock (@GreenSock) on CodePen.

 

Also I ported the same demo to Vue

https://stackblitz.com/edit/vitejs-vite-o9iewoo4?file=src%2FApp.vue&terminal=dev

 

Finally it seems you created a different thread for this same issue, right? If so it would be better to just focus on this thread. Let me know so I can delete the other thread.

 

Hopefully this helps

Happy Tweening!