search

compassion-global-experience / compassion-design-system

Compassion International's Global Design System
https://designwithcompassion.com
MIT License
6 stars 6 forks source link

Timeline Component #54

Closed kendrick closed 1 year ago

kendrick commented 3 years ago

A Timeline component is design-complete in Figma but needs to be added to the React components. Gradient optional. 😉

image

cijhodges commented 3 years ago

https://user-images.githubusercontent.com/11335891/117848394-e0923600-b248-11eb-8df4-e085d23c246b.mov

@kendrick What do you think of this animation for the timeline?

kendrick commented 3 years ago

That’s lovely, @cijhodges! Definitely a keeper. I wonder about transitioning border-radius to turn the dashes into a solid line as the dot animates?

cijhodges commented 3 years ago

@kendrick That's a great idea. I have it currently just going straight to solid purple (that's not shown in the video.) But the extra animation to the dashes would be sweet. Also, sorry it took me so long to respond to this message. I didn't know I had a message waiting one me. 👎