Carousel: Marquee animation

[irtaza9]

Describe the feature you would like to see added

Animation

Can you please let us know how to add the custom animation like the marquee with direction up? I was using the marquee element in one of my project but now It's not working properly on different browsers so that's why I found the prime react carousel with vertical mode.

Did

I just hide both the indicators and navigation arrows now one thing is remaining to make it like a marquee and that is the animation.

Request

Can your team will provide us the animation options in the component, It'll be very helpful for many peoples. Thank you.

Is your feature request related to a problem?

NO

Describe the solution you'd like

No response

Describe alternatives you have considered

No response

Additional context

No response

[melloware]

Don't you want orientation="vertical" to make it go up instead of left to right?

Its the 3rd example here: https://primefaces.org/primereact/carousel/

[melloware]

Can you post an example of "marquee" and what you mean by the animation? I have no idea what you are referring to?

[irtaza9]

First of all thank you for your fast response, I went through the example that you shared above and that's ok. But I want to add the animation in vertical mode like this

If you need more info please let me know, I'll be available for every type of help from my side.

[melloware]

So can you try this: https://codesandbox.io/s/admiring-dew-q48t1w?file=/src/demo/CarouselDemo.js

It has everything you want I think except for the marquee smooth animation? All navigators and indicators are off, animation is every 3 seconds going vertical.

[irtaza9]

@melloware I also did the same before launching this TT. My basic need is the smooth animation. So if you can help in this regard this will be very helpful, Thank you.

[melloware]

Right now the animation is done right in the code:

itemsContainerRef.current.style.transition = 'transform 500ms ease 0s';

No sure how easy it would be for you to change it to be "smooth" scrolling.

[irtaza9]

oh thank you, but can you please look into this again. Right now you added the transition but the actual result is not like the one that I shared in the link.

[melloware]

I didn't add anything....that is what Carousel is currently doing see:

https://github.com/primefaces/primereact/blob/85b5ff99ca57c567c7b7474de486edb14c3a2392/components/lib/carousel/Carousel.js#L91

[irtaza9]

ok my bad. so will you add something? 🤞

[melloware]

I am not sure it will look right as the animation you sent involved keyframes and I got the sense you wanted it constantly scrolling...

[irtaza9]

It'll look perfect as pure html marquee element was deprecated and people don't use that element in their projects. So many of them are looking for a component or any extra(optional) functionality that gives the same functionality like the marquee element was providing.

yes now you are getting my point. I want constantly scrolling.

[melloware]

i will leave this ticket open for PrimeTek as I am not sure this is a feature they will want to implement. If you feel strongly about it you could sponsor it financially through PRO support: https://primefaces.org/primereact/support/

[irtaza9]

no, I've alternatives for this functionality by using css and keyframes. As I said I encountered with prime-react-carousel and I thought that this component should offer this functionality too.

[melloware]

OK I am just saying unless someone in the community donates a PR or its paid for through PRO support this feature most likely won't be implemented.

[irtaza9]

Thank you for your rapid response.