Close

Animated SVG Travel Timeline

This is an example of an animated timeline designed with the use of HTML, CSS, and JavaScript. The poster class which is applied for the complete page has the styles of height as 100vh, width as 100%, background-size as cover, background-position as center, background image as the image URL, width as 95%, color as white, padding-top as 5.5rem, font-weight as $font-weight—semi, font size as 2em, and transition as all 400ms ease. JavaScript functions are used to apply styles to the classes dynamically on the scroll event so the timeline will be displayed as you scroll down the page through the timeline. The timeline is implemented with the styles of position as absolute, margin-left as 50%, transform as translateX (-50%), and display as none. The day sum has the styles of color as white, font-weight as $font-weight—light, font size as .8em, display as block, margin-bottom as 1.5em and line-height as 1.5. Source: https://codepen.io/vincebrown/pen/BNazqL

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.