Jump to content
Search Community

Creating vertical carousel

marsi test
Moderator Tag

Go to solution Solved by marsi,

Recommended Posts

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.

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

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?

Link to comment
Share on other sites

  • 4 weeks later...
  • 8 months later...

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!

  • Like 1
Link to comment
Share on other sites

 

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!

 

 

  • Like 3
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.
×
×
  • Create New...