Creating vertical carousel

[marsi]

Are there any methods of creating a vertical carousel, with the selected item fixed in the center of the screen? I've tried something based on this project, but the results have been unsuccessful. Found alternatives on the forum, codepen didn't give any results either 

Modifiers Plugin for Infinite Image Carousel - GSAP - GreenSock
 

 

 

[mikel]

Hey @marsi,

 

Welcome to the GreenSock Forum.

 

You can find a number of examples on the GSAP ScrollTrigger page. For example this one:

 

https://codepen.io/GreenSock/details/RwKwLWK

 

Does it help?

 

Happy tweening ...

Mikel

 

[marsi]

Thank you, your answer makes a great contribution to solving my question, but I would like to know if there are any code examples with vertical card display?

[OSUblake]

9 hours ago, marsi said:

I would like to know if there are any code examples with vertical card display?

 

What's wrong the example @mikel linked to? Vertical behavior would be the exact same, just in a different direction. You just need to modify the code so it works on the y axis instead of the x axis.

[marsi]

Yes, thank you, it all worked out, if anyone needs an example of a vertical carousel:  

See the Pen KKWYRrE by irtexfree (@irtexfree) on CodePen.

[mikel]

 

Hey @marsi,

 

How about this?

 

See the Pen yLMrwrK by mikeK (@mikeK) on CodePen.

 

Happy scrolling ...

Mikel

 

[Mlnto]

Hi, i try to use the same function, but unfortunately the scroll/next/prev actions are always regarding to the body.
If i want to implement it inside div on a page, it always scrolls if the body scroll, and the body jumps up and down, if i click the next or prev button.

Is there a way to reduce this animation only inside a div?

[chacrasoftware]

Was following all the codepen example above but looks like all of them have this same weird issue, could be something broke from recent gsap update? I have replicated the codepen in our project and has the similar issue

[akapowl]

 

Might be related to this:
 

 

[GreenSock]

Yes indeed, I believe that's fixed in the upcoming release which you can preview at: 

• GSAP: https://assets.codepen.io/16327/gsap-latest-beta.min.js
• ScrollTrigger: https://assets.codepen.io/16327/ScrollTrigger.min.js

Sorry about the confusion! Let us know if you still see any problems with the beta files in place. 

[GreenSock]

 GSAP 3.11.2 is officially live and should resolve this issue. The CDN may take a little extra time to update, but Github, NPM, and the file downloads are all updated now. ?

[bananafox]

Hi! Is there any way to turn off the endless animation in vertical slider and make it play only once and after it ends the page continues to scroll as before?

[Rodrigo]

Hi @bananafox and welcome to the GreenSock forums!

 

Sure it can be done, but it might not be the simplest thing. That code is very specific for that use case (infinite scrolling) so modifying it might not be the simplest of tasks.

 

I think it might be simpler to just create a couple of subsets of the elements (like attaching the first three at the end of the array and the last three at the start) and create the effect from scratch using that instead of creating the seamless loop, and just animate that timeline using ScrollTrigger.

 

Another option could be to use the seamless loop method and create a timeline with it and use ScrollTrigger to scrub that particular timeline:

const seamlessLoop = buildSeamlessLoop(cards, spacing, animateFunc);

ScrollTrigger.create({
  trigger: ".my-element",
  start: "top top",
  end: "+=200%",
  scrub: true,
  animation: seamlessLoop,
});

Finally is really hard for us to find issues or provide support without a minimal demo. If you get stuck and have a particular GSAP related question, create one that clearly illustrates the problem you're having so we can take a look.

 

Hopefully this helps.

Happy Tweening!

[tiny999]

Hi, hope everyone's doing okay. What would be the best way to add an "active" css class to the card in the middle and update that as we scroll? 
Thanks!

[akapowl]

 

Hello there, Tiny.

 

If I am not mistaken, the examples in this thread here are based off of a horizontal version of that carousel, that is highly optimized and uses rather advanced techniques to begin with. So getting to an idealy performant way to achieve what you intend will likely not be the easiest endeavour, and thus would probably take a lot of considertion into account - and it might just not be within the range of what this free support forum can offer.

If you don't mind possible performance drawbacks, you could have a look at the suggestions that were made in this other thread, and try and convert them to match the vertical logic for your needs - the second suggestion made there might be a safer bet with regard to that.
 

Maybe this can help in some way. Happy Tweening!

 

 

[m__shum]

On 6/21/2021 at 1:38 AM, mikel said:

 

Hey @marsi,

 

How about this?

 

 

 

 

Happy scrolling ...

Mikel

 

I keep seeing iterations of this carousel all over this forum and every example runs into the same issue – the logic breaks as soon as you reduce the number of items down to 6 or less.  The closest I've come is here: 

See the Pen MYgzZBE?editors=1010 by m-shum (@m-shum) on CodePen.

 and even this is a far cry from functional. I just cannot figure out where the 8 or so extra "slides" are coming from – neither in the demo I used, or your demo.

[Rodrigo]

Hi @m__shum,

 

Indeed as you already mentioned in another thread, the code has some issues with less elements. Unfortunately this is not the simplest of logics to tinker with and try to solve so it works in a specific setup like the one you're aiming for and we don't have the time resources to provide custom demos for our users or solve complex logic issues, is beyond the scope of what we do in these free forums. Maybe another user has the time and tackles this challenge (definitely a fun one, but complex nonetheless) but it might not happen, we just want to manage expectations on the subject. You can search the forums for other threads but I don't recall any variation of this demo for such a specific use case as the one you have in place.

 

You can also post in the Jobs & Freelance forums in order to get help there.

 

Good luck with your project! 👍