General Notes
Timeline is disabled in Breakdance and you will see a horizontal scroll-bar which let’s you get to the slides to preview them.
Timeline – Adding Content
You can feed Timeline by Query or Repeater – or choose Default mode to enter items manually.
Timeline – Default Mode
Select Add Item to get the item dialogue. Here you can enter details. Any left blank simply won’t be included for that slide, you don’t have to fill them all in.
Most items are self-explanatory.
Alt Text will be added to the image.
Link – if included, will add a button that links to this URL.
Link Text – will be the button text.
Add as many items as you want, but it’s best not to make the timeline too long… or people will get tired of scrolling! 😉
Timeline – Repeater Mode
Create a global block. You can make it any size and add any content. The timeline connectors can be made to attach top or bottom, middle or edge, so you can add elements to align with it.
Then select your global block here. You can change the tag, and add alternates etc. as with the normal Breakdance global blocks. Alternate items work, Static items are ignored. Finally you can choose the repeater that will feed the global block.
Timeline – Query Mode
Query mode is identical to using queries anywhere in Breakdance. As with repeater, you should create an appropriate global block and select it here, along with the tag and alternates if required.
Then set-up your query however you prefer. The only important part is that you set total posts and posts per page to whatever number of items you want to display. There are settings for this in Custom query, but you’ll need to remember to set them for Text or Array types.
Content – Sticking
Changes – Sticking has moved to Styles and can now be set for every breakpoint.
Anchor – which part of the slider anchors scroll, top or bottom. To stick to the bottom of the screen you would choose Position: 100% (from top) and anchor Bottom. Then when the bottom of the slider hits 100% from top-of-screen it will stick.
Reverse – Will move the timeline left to right. Don’t forget to reverse the order of your items.
Snap – when enabled, sections will snap into place. Not available in Wipe mode.
Buffer – When the ScrollSlider sticks, the change to sideways movement can feel abrupt for users. The Buffer allows a ‘dead scroll’ so the horizontal movement isn’t too sudden.
About 300px usually ensures we don’t switch to horizontal and move most of our first slide before the user realises we’ve gone horizontal.
Scroll Speed – Some effects, and the ‘Snap’ mode, can benefit from being slowed down. For Snap, it means the user won’t scroll too much, and each slide can Snap in place. With effects it can be nice to combine a slower speed with easing to get a buttery scroll.
Scroll Speed doesn’t do any scroll-jacking, it simply ‘makes the ScrollSlider longer’ in effect, so there are no tricks played with the mouse that might interfere with accessibility or other plugins.
Easing – control the ease from one slide to the next when in ‘Snap’, or the ‘friction’ in normal scroll. With no easing, horizontal sections behave just like vertical sections, moving with the mouse. When you apply Easing, the slides take a little time to start and end their movement which make it feel smooth and classy!
Content – Other
Don’t change these unless you know what you’re doing.
Show Markers – Meant for debug. It will show where GSAP has decided scroll should start and end for all items. If you get unexpected results this can help show why, or at least reassure you GSAP is alive and trying to scroll.
No Wrap / No Spacing – Both these settings can wreck page-layout (but not permanently, just switch them back off!)
In order to Scroll horizontally, we have to ‘fake’ a large amount of vertical space, so the browser thinks there is some scroll happening while we stick our sections in place.
We then ‘grab’ the section above and below and hold them while we scroll our Scroller. Otherwise, with non-full-height sliders, you will see content above continue to scroll up, and content below ‘scroll in’ near the end. This can look really bad, so we pin the above and below – and our ‘fake space’ is neatly off-screen and never seen.
However, for the brave or foolish, you can disable this. The reason you might want to is that it enables one slider to follow another. Normally we can’t do this because we have pinned what’s above and below – and if it’s a Slider above or below the Sliders get tangled up in each-other. Switch off Wrap and you can put one ScrollSlider directly after another (maybe the first to scroll left, the next to scroll right).
No Spacing – will not put the ‘fake spacing below’. If you disable Spacing, you must add the correct amount of space below manually. Example: If you have 5 Slides at 100vw, add an empty section below and make it 500vw high. If you don’t – vertical content will scroll over the slider… but this can actually be a nice effect if used well (put just images in the Scroller, and let content scroll vertically by as images move horizontally, for example).
It can be difficult to grasp and if you don’t fully understand the implications, don’t use the options. But it opens up some useful possibilities if you use it properly.
Design – Container Layout
You can set the Height and Stick Position here, which work hand-in-hand. They can now be set for all breakpoints.
Padding – is important. The timeline is hard on the left, so left padding decides it’s distance from screen edge.
Gap is between timeline items.
Align will align the timeline in the container if you set the container height.
Design – Default Mode
Style – If you chose Default mode, you will see a Style dropdown. These will change the layout. With my honest hat on, they are just ok. Given that you can make a global block I didn’t see much need for default styles. If you want more, nag me.
You can also set the vertical alignment for default items.
Design – Timeline
You can choose to keep the plain line placed top, middle or bottom, or you can choose to have Fancy timeline links. This will draw a timeline and markers between all items.
Design – Timeline Style
For the default timeline link you’ll have active/inactive color and width.
If you choose a Fancy timeline, you’ll get lots more options, including the Timeline dropdown where you can choose the style of the links. Circuit, String, Line Angles and Line Corners align to the bottom or top of all items. Alternating Line and Alternating Corners will link top / bottom / top / bottom along the items.
Join – lets you make larger or smaller joins.
Marker Align lets you decide if marker should connect to the middle or either corner of items.
Marker Radius – is the size of the dot, which can also be given a Stroke.
Width – is the thickness of the connecting line.
Design – Timeline Style
For the default timeline link you’ll have active/inactive color and width.
If you choose a Fancy timeline, you’ll get lots more options, including the Timeline dropdown where you can choose the style of the links. Circuit, String, Line Angles and Line Corners align to the bottom or top of all items. Alternating Line and Alternating Corners will link top / bottom / top / bottom along the items.
Join – lets you make larger or smaller joins.
Marker Align lets you decide if marker should connect to the middle or either corner of items.
Marker Radius – is the size of the dot, which can also be given a Stroke.
Width – is the thickness of the connecting line.