Timeline

Timeline is a nestable block element. It is essential to understand what their nested elements do in order to create a cool timeline effect and to move it’s items with ease.
Timeline element is made of “Timeline Item” elements, that contain a “Left Section” element, “Center Section” element and “Right Section” element. Each “Timeline Item” represents a section at the timeline. You can create as much timelines items as you need for the timeline.
Left Section, Center Section and Right Section elements contain Sticky Wrapper elements, that will stick when their parent element is actively pinned. If there is content at these sections to be sticked then it has to be placed there, otherwise, you can just drop the content at the section but outside Sticky Wrapper or even delete Sticky Wrapper if you won’t stick nothing at the section.
Left Section, Center Section and Right Section elements can be removed at pleasure. If you won’t need a Left Section at a Timeline Item you can just delete it, like it is done at Next Bricks changelog.
Left and Right Sections should contain your content and Center Section is for the Circle/Ball to track the Timeline Item at the Timeline.
Timeline line progress doesn’t belong to any section, it belongs to Timeline element because it is shared by all Timeline items, so the Center Section that contains the Circle/Ball has to be positioned to match the line progress, otherwise, it would be weird.
Left Section, Center Section and Right Section elements have a grid and a padding already set, but they can be changed at pleasure.

Line progress has a fixed position at the page, so that it is shared by all Timeline items.
Start: determines where the line progress will start. e.g: 50vh will positioned line progress at the middle of the page.
Gradient: gradient colors and degree of the line progress can generated here at pleasure.
Path color: determines the color of the path below the line progress.
Fade edges height: determines how much fade to apply at the line progress at it’s top and bottom. If you don’t want a fade you can just set it to 0.
There are 3 more styles to customized here: size, left and right. It is essential to set appropriate left and right values (relative to Timeline element) to match Timeline items.

Here you can customize Sticky Wrapper element.
Sticky top: determines at what distance to stick. It should be equal to line progress start property.
Center outline width: determines how much outline width to apply at the Circle/Ball of Center section (to overlay line progress).
Center outline color: determines the color to apply at the outline at the Circle/Ball of Center section (to overlay line progress).

Circle/Ball element styles can be customized here. You can also set any other property at the element’s style tab.

All sections have a fade reveal animation. You can enable/disable fade of each Left, Center and Right sections individually.
Timeline sections uses ScrollTrigger Library to fire their fade reveal animations on scroll. Learn more about ScrollTrigger here.
From opacity: determines from which value the fade will come from.
Start: determines the position of the Trigger to fire the animation. “top bottom” means when the top of the element hits the bottom of the viewport.
End: useful when combined with Scrub property. Determines when to end the animation.
GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.
Scrub: to attach the animation to the scroll so that it plays when scrolling.
Duration: requires Scrub to be disabled.
Delay: requires Scrub to be disabled.
toggleActions: requires Scrub to be disabled.
Determines how the linked animation is controlled at the 4 distinct toggle places – onEnter, onLeave, onEnterBack, onLeaveBack, in that order. “play pause resume reset” will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning.