CODEWITHSUNDEEP
cssreactjsanimationcss-animations
Malvinka
Malvinka

Reputation: 1379

React component sliding in/out

I'm trying to write a sliding menu similar to that with images here: https://chustynka.pl/

I've got already components that are changing in time (with arrows) the only thing left is animation. I added the classes and ids that will be useful but I don't know how to use css to animate them. Could you help?

https://codesandbox.io/s/00rnj29p60

Upvotes: 0

Views: 1398

Answers (1)

weibenfalk
weibenfalk

Reputation: 892

Unfortunately it's not just CSS code you need. As you're going to animate the slides you have to do some more javascript code as well. For example you have to keep track of the direction of the slides. That is if you're pressing the left or right arrow. That, in turn, will decide which direction the slides will slide in/out.

There's a lot of approaches to doing this but it involves more coding in JS. =)

This is not a React slider I've made here but you can download/clone it from Github and take a look at the script for it. Maybe it will give you some idea of what you have to do.

https://github.com/weibenfalk/Slider-Carousel---Lightweight-in-Vanilla-JS-ES6-

Upvotes: 1

Related Questions