Pin Spacing Issue

[Lk kumar]

 

<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}`, imagePos === 'bottom' ? 'journey-card-bottom' : 'journey-card-center']" />

</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,

},

})

 

onMounted(async () => {

await nextTick()

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

gsap.registerPlugin(ScrollTrigger)

 

const panels = gsap.utils.toArray('.journey-card')

 

gsap.to(panels, {

yPercent: (i) => {

if (i === 0) return 0; // first card, no movement

if (i === 1) return props.imagePos === "bottom" ? -100 : -106; // second card

if (i === 2) return -194; // third card

return 0;

},

// y: i => i && 0 * (i - 1), // optional, can be removed

duration: i => i,

ease: 'none',

scrollTrigger: {

trigger: props.sliderWrapper,

start: 'top top',

end: '+=' + (panels.length * 100),

scrub: true,

pin: true,

}

})

})

</script>

 

<style>

.card-wrapper {

position: relative;

height: 100vh;

overflow: hidden;

}

 

.card-wrapper .journey-card.journey-card-bottom {

min-height: 500px;

}

 

.card-wrapper .journey-card.journey-card-center {

min-height: 560px;

}

 

.card-wrapper .journey-card.journey-card-bottom .journey-card-content {

max-height: 100%;

}

 

.card-wrapper .journey-card.journey-card-bottom .journey-card-content .journey-card-image img {

height: 431px;

width: 808px;

border-top-left-radius: 24px;

}

 

.card-wrapper .journey-card.journey-card-center .journey-card-content {

max-height: 100%;

}

 

.card-wrapper .journey-card.journey-card-center .journey-card-content .journey-card-image img {

height: 500px;

width: 500px;

border-radius: 24px;

}

 

@media only screen and (max-width: 1024px) {

.card-wrapper .journey-card.journey-card-center .journey-card-content .journey-card-image img {

height: 100%;

width: 100% !important;

}

}

 

@media only screen and (min-width: 1280px) {

.card-wrapper .journey-card.journey-card-center .journey-card-content .journey-card-image img {

height: 431px;

width: 500px;

}

}

</style>


this is the code sir please check and help me

[Lk kumar]

the transition is vertical

 

[GSAP Helper]

Without a minimal demo, 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]

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

[Lk kumar]

this could be yPercent

yPercent: (i) => {
    if (i === 0) return 0; // first card, no movement
    if (i === 1) return props.imagePos === "bottom" ? -100 : -106; // second card
    if (i === 2) return -194; // third card
    return 0;
  },

[Lk kumar]

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

[Lk kumar]

Please check sir this is the stackblitz code 

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

 

[Rodrigo]

Hi,

 

Your codepen demo is not working and the Stackblitz URL returns a 404 error:

I think this guide by @mvaneijgen is a great resource and you should check it:

 

Happy Tweening!

[Lk kumar]

Please check sir this is the stackblitz code and screen so much space below

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

[Lk kumar]

Sir please help me

 

[Rodrigo]

Hi,

 

I don't see that space on my laptop, but the issue remains the same as explained in this other thread:

You have to wrap all the elements that will be in view in a common ancestor and pin that ancestor element as shown in these demos:

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

 

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

 

Happy Tweening!

[Lk kumar]

This is the space i can facing when on mobile or other devices

you can see all styles inject using gsap

 

[Lk kumar]

I just want vertical stack animation when i scroll.
then first card show, after that scroll and stack 2nd card after that 3rd card and so on..

[Lk kumar]

Sir i have added all three cases of code that are not working.

But my cards have fixed height like 500px and 600px, I am not using vh heights.

have some space issues in the animation please check.

In this pan

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

[Lk kumar]

Sir you can check my code , I simply want, =>

 

<section class="parent-trigger">
  <div class="secion-header">

this should be stick on scroll and 
when cards scroll it will stack one another on top and no any space at bottom after scroll finish.


so Much Space below

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

[Rodrigo]

Hi,

 

That is completely expected since you're moving the panels on the Y axis while pinning their parent element:

gsap.to(panels, {
  yPercent: (i) => {
    if (i === 0) return 0;
    if (i === 1) return -106;
    if (i === 2) return -194;
    return 0;
  },
  ease: "none",
  scrollTrigger: {
    trigger: pinElement,
    start: "top top",
    end: "+=" + panels.length * window.innerHeight, // more scroll distance
    scrub: true,
    pin: parentTrigger,
    pinSpacing: false
  }
});

If you want to slide cards up in that fashion and don't have any extra space afterwards, you'll need a different setup where all the cards have position absolute, as shown in the demos in this thread:

Is worth mentioning that you already have created two different threads for the same issue and working demos have been provided. Also I don't know how many times I have mentioned this resource created by @mvaneijgen on the stacking cards subject:

Yet you seem to keep ignoring it.

 

These forums are all about helping but we're definitely running in circles here and getting nowhere I'm afraid. Please study the demos, docs and other resources that have been provided, learn more about how CSS works in different scenarios in order to know exactly how to create the setup you're after. There are many free resources out there to learn that, this should be the first one you should consult (I go there every time I have a doubt about something):

https://developer.mozilla.org/en-US/docs/Web

 

This is also really good:

https://www.w3schools.com/

 

And then you have countless free tutorials and video courses here:

https://www.freecodecamp.org/

 

Hopefully this helps

Happy Tweening!

[Lk kumar]

Thanks it's working..😀