svelte-animated-timeline

Timeline component supporting animation, custom icon, vertical & horizontal modes

This component is created and inspired by react-vertical-timeline

Install

npm i svelte-animated-timeline

Usage

• Basic usage

<script lang="ts">
    import { Timeline, TimelineElement } from 'svelte-animated-timeline';

    import WorkIcon from '$lib/components/WorkIcon.svelte';
</script>

<Timeline id="timeline" triggerOnce={false} lineColor="#dddddd">
    <TimelineElement
        id="elm1"
        class="svelte-timeline-element--work"
        date="2011 - present"
        contentStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
        contentArrowStyle={{ 'border-right': '7px solid  rgb(33, 150, 243)' }}
        iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
    >
        <WorkIcon slot="icon" />
        <h3 class="svelte-timeline-element-title">Creative Director</h3>
        <h4 class="svelte-timeline-element-subtitle">Miami, FL</h4>
        <p>Creative Direction, User Experience, Visual Design, Project Management, Team Leading</p>
    </TimelineElement>
    <TimelineElement
        id="elm2"
        class="svelte-timeline-element--work"
        date="2010 - 2011"
        iconNoDefaultStyle
        iconStyle={{ background: 'red', 'border-radius': '50%' }}
        contentStyle={{ background: 'papayawhip' }}
    >
        <WorkIcon slot="icon" />
        <h3 class="svelte-timeline-element-title">Art Director</h3>
        <h4 class="svelte-timeline-element-subtitle">San Francisco, CA</h4>
        <p>Creative Direction, User Experience, Visual Design, SEO, Online Marketing</p>
    </TimelineElement>
</Timeline>

• Full line timeline

<script lang="ts">
    import { Timeline, TimelineElement } from 'svelte-animated-timeline';

    import WorkIcon from '$lib/components/WorkIcon.svelte';
</script>

<Timeline id="timeline" triggerOnce={false} lineAmongTimelineElementsOnly={false}>
    <TimelineElement
        id="elm1"
        class="svelte-timeline-element--work"
        date="2011 - present"
        contentStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
        contentArrowStyle={{ 'border-right': '7px solid  rgb(33, 150, 243)' }}
        iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
    >
        <WorkIcon slot="icon" />
        <h3 class="svelte-timeline-element-title">Creative Director</h3>
        <h4 class="svelte-timeline-element-subtitle">Miami, FL</h4>
        <p>Creative Direction, User Experience, Visual Design, Project Management, Team Leading</p>
    </TimelineElement>
    <TimelineElement
        id="elm2"
        class="svelte-timeline-element--work"
        date="2010 - 2011"
        iconNoDefaultStyle
        iconStyle={{ background: 'red', 'border-radius': '50%' }}
        contentStyle={{ background: 'papayawhip' }}
    >
        <WorkIcon slot="icon" />
        <h3 class="svelte-timeline-element-title">Art Director</h3>
        <h4 class="svelte-timeline-element-subtitle">San Francisco, CA</h4>
        <p>Creative Direction, User Experience, Visual Design, SEO, Online Marketing</p>
    </TimelineElement>
</Timeline>