Horizontal card stack animation with spacer

[Rahul Krosuri]

Hello, 
I am completely new to gsap and I saw an effect in a site where cards were stacked horizontally and there was a spacer for cards so that they don't overlap with each other completely, I tried looking online and went through many docs, and articles but couldn't achieve it.

the thing in the image is what I am trying to achieve, 
I am here right now

 

See the Pen jOeJyvw by rahul-krosuri-au6 (@rahul-krosuri-au6) on CodePen.

[Rahul Krosuri]

for now I gave margin for achieving the desired effect, but the website doesn't seem to use any margin

 

[mvaneijgen]

Hi @Rahul Krosuri welcome to the forum! 

 

You could of course do this via multiple ways, so it if works for you it is probably a fine solution!

 

Personally I like to create timelines for all my tweens when working with ScrollTrigger, makes it easier to read and maintain in my opinion. I've add the index property to your function based tweens, so that we can do some calculations based on which number it is in the index. Is this what you're looking for? Hope it helps and happy tweening! 

 

See the Pen ZEqPewd?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen.

[Rahul Krosuri]

Thank you @mvaneijgen, Can you also help me regarding the speed of the scroll, if you can, the cards scroll fast and I need at least two scrolls for one card
I tried adjusting the end to some number like "+=5000" ( also tried with 4000, 3000, 2400, 2000, 1500, 1000), But this seems to be interfering with the next element as it comes on top of this

Thanks in Advance

[mvaneijgen]

Increase the end value to something arbitrary like 3000px or set it to x amount the window height. Take a look at the following video great demonstration how ScrollTrigger works. 

 

end: "3000px bottom"
end: `${window.innerHeight * 5} bottom`,

 

 

[Rahul Krosuri]

@mvaneijgen Hey Hey, I am back with a new query, Currently, I made the text in the above cards clickable, In such a way that if I click on the 3rd one, it should scroll past the second and show the third card, I was able to achieve this while clicking on card 2 and card 3 or directly clicking on card 3 skipping card2.....but when try to go back from card 3 to card 2, it scrolls down and but not to card 2

 

function clickedElement(clickedElement) {
  const parentElement = clickedElement.parentNode
  const parentId = parentElement.id
  let left = $(parentElement).offset().left
  let targetOffset = $(parentElement).offset().top + left  - $(parentElement).outerHeight();
  console.log($(parentElement).offset().left)
  console.log($(parentElement).offset())
  const currentScroll = window.scrollY
  let offset = targetOffset;

  gsap.to(window, {
    duration: 0.5,
    scrollTo: {
      y: offset,
      offsetY: 0
    }
  })
}

this is what I used for it.....I am using left too as the offset.top() is same for all elements as they are horizontally stacked, this has very less of gsap used but any help would be appreciated as I am raking my brain over this
Thank you

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates 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 dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

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 the gsap-trial NPM package for using any of the bonus plugins: 

• 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.