Jump to content
Search Community

Add Effects to Carousel

thomas-12345 test
Moderator Tag

Recommended Posts

I have started with the card carousel

See the Pen rNZvKNJ by thomas-hibbard (@thomas-hibbard) on CodePen

, and altered it use a class so I can more easily drop it into a Vue app. However I am really struggling with a few things:

1. I want there to be two separate levels of scale reduction. One foreground scale=1 card, surrounded by two at smaller scale and then a third tier at a smaller one yet, farthest from the center.

2. I want, as an element disappears off the stage at the right, to appear on left stage and vice versa

 

For the first idea, I have tried setting the scale in the initCell method with 

 

let scale: number = 0.6;
  if ([0, 6].includes(index)) {
    scale = 0.3;
  }

which sort of  has the right idea, but really just falls apart because only the cells that are set to 0.3 initially go back to that size as the animation progresses. 

 

The second idea, I'm really at a loss for. I did an implementation of this design where each forward/backward tick was its own timeline with a repeat of "1", and doing the animation like I was able to clone cells onto the DOM that had correct innerText for what would be rotated onto the visible stage with the next previous or next button click. This doesn't work at all with the animation I've used as a starting point for this attempt. 

 

I would be grateful for any help here. Thank you.

 

See the Pen JjavMdy by thomas-hibbard (@thomas-hibbard) on CodePen

Link to comment
Share on other sites

@Rodrigo This is a really great example, thank you so much. It will me a while to unpack what exactly is happening here. One concern I have with it though is that when I reduce the number of <li> down to 5, the animation breaks, and I cannot figure out why. There's just a lot going on here and I'm struggling to figure that out. 

Link to comment
Share on other sites

Hi,

 

2 minutes ago, thomas-12345 said:

One concern I have with it though is that when I reduce the number of <li> down to 5, the animation breaks, and I cannot figure out why.

Most likely it has to do with the fact that at all times you have 5 elements in view, plus the extra elements that are not visible. So I'd assume that if there are no extra elements there will be no animation. If you want to show 5 elements at a time and you only have 5 then just set the initial styles and create a different type of animation.

 

As you mention this is not the simplest thing to create and follow and, as I mentioned in another thread, we don't have the time resources to break down the logic of complex examples for our users, sorry.

 

My suggestion would be to start with something simple and add complexity to it progressively. If you run into a GSAP related question, don't hesitate to ask!

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

  • 5 months later...

Hi Cristina,

 

Sorry but if you  don't provide a working minimal demo there is not much we can do. The latest demo you linked has over 600 lines of HTML and JS, plus as soon as you start scrolling down, at certain point it goes back to the top 🤷‍♂️

 

The only suggestion I can give you is to try to replicate the example in Vue without anything else, just replicate the exact same codepen in a Vue component, then start adding other elements to the example or plug that particular component on a larger app. This is one of the challenges when you try to use someone else's code in your app. Sometimes these examples are very specific and translating them to a larger or different app can post a real challenge. On top of that, as I mentioned before in this thread, this is not the simplest thing to achieve and we don't have the time resources to build custom solutions for our users.

 

Happy Tweening!

Link to comment
Share on other sites

Hi,

 

I'm afraid that is not as simple as just remove the ScrollTrigger instance as it seems very intertwined. I fiddled with the example for a bit without a lot of success.

 

This is the best I can come up with the time I have and I can guarantee you that is NOT 100% bullet proof. As you can see the buttons don't work anymore:

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

 

Unfortunately we don't have the time resources to create custom complex solutions or adapt complex examples for our users as I already explained to you in my previous post.

 

Good luck with your project!

Happy Tweening!

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