--- title: Animated timeline module description: The “Animated Timeline” module allows you to organize and display events in chronological order with a clean and visually appealing design. It is simple yet highly customizable, ensuring it seamlessly aligns with your brand’s identity. --- [Skip to content](https://bereto.dev/animated-timeline#main-content) [![bereto.dev](https://bereto.dev/hubfs/bereto_dev_logo.svg "bereto.dev")](https://bereto.dev/) - [Services](https://bereto.dev/services) - [HubSpot Marketplace](https://bereto.dev/hubspot-marketplace) - [Projects](https://bereto.dev/projects) - [Blog](https://bereto.dev/blog) - [About Me](https://bereto.dev/about-me) This is a search field with an auto-suggest feature attached. - There are no suggestions because the search field is empty. [Contact](https://bereto.dev/contact-me) [Contact](https://bereto.dev/contact-me) This is a search field with an auto-suggest feature attached. - There are no suggestions because the search field is empty. - [Services](https://bereto.dev/services) - [HubSpot Marketplace](https://bereto.dev/hubspot-marketplace) - [Projects](https://bereto.dev/projects) - [Blog](https://bereto.dev/blog) - [About Me](https://bereto.dev/about-me) # Animated timeline The “Animated Timeline” module allows you to organize and display events in chronological order with a clean and visually appealing design. It is simple yet highly customizable, ensuring it seamlessly aligns with your brand’s identity. [Go to the marketplace](https://ecosystem.hubspot.com/marketplace/modules/animated-timeline-module-by-devteam-partners) #1 First event Short description #2 Second event Short description #3 Third event Short description ## Cool example Image ratio 16:9 - Animation activated ![Flight_4_Website_Desktop_1_692d0a4a6e](https://bereto.dev/hubfs/Flight_4_Website_Desktop_1_692d0a4a6e.jpg) April 20, 2023 First integrated Starship test flight Successful liftoff, but the spacecraft experienced an “unplanned disassembly during ascent” due to stage separation failure, resulting in its destruction. ![make_life_multiplanetary_desktop_3fa7cff73c](https://bereto.dev/hubfs/make_life_multiplanetary_desktop_3fa7cff73c.jpg) November 18, 2023 Second flight Successful liftoff and stage separation, but the spacecraft exploded during flight before completing its intended mission. ![starbase_desktop](https://bereto.dev/hubfs/starbase_desktop.jpg) March 14, 2024 Third flight Successful stage separation, but engine ignition failures during booster and ship landing. ![starship_capabilities_main_desktop_darkened_v3](https://bereto.dev/hubfs/starship_capabilities_main_desktop_darkened_v3.jpg) June 6, 2024 Fourth flight Similar trajectory to previous flight. Lost one engine after liftoff, but controlled ocean landings for both stages. ![vlcsnap_2024_08_22_15h06m31s191_10dd6dd442](https://bereto.dev/hubfs/vlcsnap_2024_08_22_15h06m31s191_10dd6dd442.png) October 13, 2024 Fifth flight First successful booster landing on the launch tower. The ship performed a controlled splashdown in the Indian Ocean. ![starhip_website](https://bereto.dev/hubfs/starhip_website.jpg) November 19, 2024 Sixth flight Booster catch aborted, resulting in a Gulf of Mexico splashdown. The ship completed an in-space engine ignition and landed in the Indian Ocean. ![Flight_7_Website_Desktop_7_4afb3a9d9a](https://bereto.dev/hubfs/Flight_7_Website_Desktop_7_4afb3a9d9a.jpg) January 2025 Seventh flight Successful booster catch, but lost communication with the ship eight minutes post-launch, indicating its destruction. Coming soon Eighth flight The ship and booster for Starship’s eighth flight test are built and going through prelaunch testing and preparing to fly as we continue a rapid iterative development process to build a fully and rapidly reusable space transportation system. [Learn more](https://www.spacex.com/vehicles/starship/) ## Module settings ### Content Timeline - Date - Title - Description - Link - Link text - Image Advanced settings - Custom Class - Custom ID ![Captura de pantalla 2025-02-17 a las 3.52.16 p.m.](https://bereto.dev/hubfs/Captura%20de%20pantalla%202025-02-17%20a%20las%203.52.16%20p.m..png "Captura de pantalla 2025-02-17 a las 3.52.16 p.m.") ![Captura de pantalla 2025-02-17 a las 3.53.24 p.m.](https://bereto.dev/hubfs/Captura%20de%20pantalla%202025-02-17%20a%20las%203.53.24%20p.m..png "Captura de pantalla 2025-02-17 a las 3.53.24 p.m.") ![Captura de pantalla 2025-02-17 a las 3.54.49 p.m.](https://bereto.dev/hubfs/Captura%20de%20pantalla%202025-02-17%20a%20las%203.54.49%20p.m..png "Captura de pantalla 2025-02-17 a las 3.54.49 p.m.") ### Styles Cards: - Card color - Border radius - Animation Timeline: - Timeline color - Marker color Content - Date font - Title font - Description font - Image aspect ratio Module spacing - Margin - Padding ![Captura de pantalla 2025-02-17 a las 3.47.45 p.m.](https://bereto.dev/hubfs/Captura%20de%20pantalla%202025-02-17%20a%20las%203.47.45%20p.m..png "Captura de pantalla 2025-02-17 a las 3.47.45 p.m.") ![Captura de pantalla 2025-02-17 a las 3.47.57 p.m.](https://bereto.dev/hubfs/Captura%20de%20pantalla%202025-02-17%20a%20las%203.47.57%20p.m..png "Captura de pantalla 2025-02-17 a las 3.47.57 p.m.") ![Captura de pantalla 2025-02-17 a las 3.48.21 p.m.](https://bereto.dev/hubfs/Captura%20de%20pantalla%202025-02-17%20a%20las%203.48.21%20p.m..png "Captura de pantalla 2025-02-17 a las 3.48.21 p.m.") ![Captura de pantalla 2025-02-17 a las 3.48.35 p.m.](https://bereto.dev/hubfs/Captura%20de%20pantalla%202025-02-17%20a%20las%203.48.35%20p.m..png "Captura de pantalla 2025-02-17 a las 3.48.35 p.m.") bereto.dev © 2026 | [Privacy Policy |](https://devteam.partners/legals#privacy)[Terms & Condition](https://devteam.partners/legals#terms)