stephane-monnot / react-vertical-timeline

Vertical timeline for React.js
https://stephane-monnot.github.io/react-vertical-timeline/
MIT License
1.07k stars 158 forks source link

[Question] Is there any way to change the animation? #12

Closed BlierNicolas closed 6 years ago

BlierNicolas commented 6 years ago

Hi,

First of all, very good job for the timeline! (if you want to see it what I did with it https://www.venatusuniverse.com/en/events)

But just a small question, is there any way to change the animation? I want to make the bubble to come from the bottom of the page instead of the right side of the page.

Thanks in advance,

Nico

stephane-monnot commented 6 years ago

Hi, I fixed animation on desktop in the last version : 2.1.3. If you want to change animation, you can use css in your own stylesheet :

.vertical-timeline--animate .vertical-timeline-element-content.bounce-in {
  visibility: visible;
  animation: custom-animation 0.6s !important;
}
@keyframes custom-animation {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  60% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
BlierNicolas commented 6 years ago

Awesome! Thank you very much. I'll look forward to it :)

BlierNicolas commented 6 years ago

I've added the part of the code that you put before and it work perfectly :D I wanted to make the box came from the bottom but I like the pop-in like that. (to se the result: https://venatusuniverse.com/en/events)

I just had to update for the latest version (I had version 2.1.2).

Thanks a lot!

stephane-monnot commented 6 years ago

I'm glad to hear that. Good job ;)