How to create an animated timeline
How to create an animated timeline
ACTIONS & ANIMATIONS
Adding Links
Adding Anchor Points
Hover Effects
Pop ups
Fade-In Effects
Parallax Scrolling
Animated Graphs
Animated Timelines
Gated Content
< BACK TO OVERVIEW
In this tutorial we are going to create an animated timeline following the example below.
1949
Miss Joan Howard is one of the young ladies who attend the switchboard at head office, Sunshine.
1976
Gary Kildall develops the first commercially successful operating system for microcomputers, CP/M.
2018
Electronics engineer Daniella Martle runs vehicle tests.
To create this timeline, we will build one block that includes a line, a dot, a date, a paragraph and an image, and animate it. Once this block is built and animated, we can just copy and paste it as many times as needed, and replace the content, to complete the timeline.
1. Add a box element. In the Element Index name it "Block 1".
2. Place another box element inside it. Name it "Box with left border". Inside this box, add two textboxes and an image, ctrl select and group them: this is "Content group".
3. Select "Box with left border", open Element Style, go to the Border section and add a left side border. Go to the Padding section and add top, bottom and left side padding.
4. Add an SVG dot as an image element inside "Block 1". In the Element Style panel, change the display mode to "Contain".
5. Bring the dot image forward by changing its Z position to 1 in the Layout panel. Place it over the black line (of "Box with left border"). Make the image center aligned vertically. Increase its height (this will make the slide in animation we'll be adding later look nicer).
6. Go to mobile view and adjust the element sizes. Select "Box with left border", open Element Style, select Phone variant and reduce the width of its left side padding.
7. In both mobile and desktop views, make sure the minimum height of all the boxes is very small (you can select each box and set an mH of 1 in the Layout panel for each one). This means each box will only be as large as the content inside it.
8. We are ready to add the animations. Select the dot image, open Element Actions, Jedi tab, and add an On Element Display Slide in Down animation. Click on the "Hide Target Element" button so that the dot remains hidden until the animation displays it.
9. Add a second On Element Display action to the dot: a Fade in Nudge Right animation that has the "Content group" as its target element. Hide Target Element.
10. That's it! Copy and paste the main block you created as many times as needed to include all the dates and events in your timeline. You can also delete or add new elements to each Content group.
Contact Support
STAY IN THE LOOP
Sign up for product updates