Stacking cards Scroll Trigger Vertical to Horizontal scroll

[S M Ariful Mamun]

Hi , I am learning gsap so I am facing trouble scroll trigger. Can i  create below tiles of design.

url is here: https://www.cieffemilano.it/en/

 

[mvaneijgen]

Hi @S M Ariful Mamun welcome to the forum! 

 

I've split your question to its own topic. First of we love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide  "how do I recreate this cool effect I saw on another site?" tutorials. 

 

That said here are some demos that do similar things in different ways, just pick the one that best suits your use case and start tweaking from there. 

 

Personally I like this one below, see how this animation doesn't work on scroll, that is because the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

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

 

Some more

 

See the Pen XWxOwVp by GreenSock (@GreenSock) on CodePen

See the Pen WNzBrdz by Mohsen-Khakbiz (@Mohsen-Khakbiz) on CodePen

 

Also there a lot of topics created on effects like these just search the forum for "stacking cards" and you'll find several topics with a lot of users jumping in and giving there feedback on how best to tackle these kinds of animations. Just read to a few and you'll get a better understanding how to apply it to your situation. 

 

If you still need help after this, please create a minimal demo and we'll be happy to take a look for you at your set up. Also if you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/. This effect is a bit complicated, so before diving in I would read the starter guide and start animating some things first before you tackle this larger project, you first need to learn to walk before you start running!

 

Hope it helps and happy tweening! 

[S M Ariful Mamun]

Hi @mvaneijgen, 

Many  thanks for your example and effort. By the way can I use overflow : hidden; but still scrolling possible at your last example? I have several attempt to stackoverflow solution for scroll bar hide on different browser and tried many times on gsap but no luck.

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

[S M Ariful Mamun]

I have created cards with videos & loop reverse. But  I need to some update as 

• Scroll each card go behind last card and it is looping
• Scroll each card show index number 1,2,3 etc outside of card video item.
• example site url: https://www.cieffemilano.it/en/

Can anybody help?

See the Pen ZEPzWvm by smarifulmamun (@smarifulmamun) on CodePen

[mvaneijgen]

Here is an example that works on click and has a bit of a different styling, but the logic should be the same.

 

See the Pen Yzdzxem by GreenSock (@GreenSock) on CodePen

 

2 hours ago, S M Ariful Mamun said:

Scroll each card go behind last card and it is looping

If you want this I would look in to the the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/, right now you're using ScrollTrigger, but it is made to hook animation to the scrollbar, and a scrollbar always has an end. iIf you want to loop you can't have an end, so you don't want to be using ScrollTrigger

 

2 hours ago, S M Ariful Mamun said:

Scroll each card show index number 1,2,3 etc outside of card video item

What have you tried already? I wouldn't see how this would be to difficult, when you'll be using the Observer plugin each time you animate to the next slide just have a separate function that sets a number to a new value. 

 

Hope it helps and happy tweening!