https://github.com/bahrus/xtal-timeline

Web component wrapper around Codepen Timeline
https://github.com/bahrus/xtal-timeline

custom-elements customelement customelements timeline-component timelines webcomponent webcomponents

Last synced: about 1 month ago
JSON representation

Web component wrapper around Codepen Timeline

• Host: GitHub
• URL: https://github.com/bahrus/xtal-timeline
• Owner: bahrus
• License: mit
• Created: 2019-09-01T18:41:38.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T04:37:46.000Z (almost 2 years ago)
• Last Synced: 2024-10-11T13:48:28.225Z (2 months ago)
• Topics: custom-elements, customelement, customelements, timeline-component, timelines, webcomponent, webcomponents
• Language: JavaScript
• Homepage:
• Size: 94.7 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        




# Vertical Timeline

Timeline based on this [codepen](https://codepen.io/hunzaboy/pen/qBWRBXw)

[Demo](https://jsfiddle.net/bahrus/uk7ey18t/)

This was almost trivial to implement as a web component.

I was going to use [this](https://codyhouse.co/gem/vertical-timeline/) as the basis for the web component, but it was too much work to modernize it sufficiently to turn into a web component.  

**NB I**  The performance of this web component should improve dramatically with the finalization of constructible stylesheets and/or HTML Modules.

**NB II**  In the demo you will see a flash of unformatted content.  This can be corrected by using styling to either hide the light children, or display it in a more elegant way.

## Viewing Your Element Locally

```

$ npm install

$ npm run serve

```