Jump to content

Rahul Krosuri

Horizontal card stack animation with spacer

Moderator Tag

Recommended Posts

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


Screenshot 2023-05-25 at 3.11.09 PM.png

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

Link to comment
Share on other sites

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


Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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



  • Like 3
Link to comment
Share on other sites

  • 2 months later...

@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();
  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

Link to comment
Share on other sites

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: 


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. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.