[Support request] How to create a timeline-effect using GB?

[Sascha]

Hey there,

please, allow me to handle this request here, since I use both GPP & GBP and would like to keep all my support tickets here.

I would like to create a timeline-effect using GenerateBlocks, where the items/containers will be connected with a thin line, and where the bg-color of the line and items will change on scroll.

You can see an example in this 10s screencast.

Is this something you can help me with?

I have tried around 10 different timeline-plugins and block-libraries, but they are not good at all, either lacking flexibility regarding design, or loading too much JS or even JQuery.

Now I have created a page using Container > Grid (1-3) > Container/Button & Container/Headline as a base, but I’m totally lost with how to proceed from here: https://gpfree.macbay.eu/blog/gb-timeline/ (another Screenshot from the editor)

Also, how to apply a circle-design to the Buttons (1-3)? I gave a padding of 25px and a border-radius of 50%, but the button does not look like a circle. Hope you can help me with this as well 🙂

Kind regards,
Sascha

[David]

Hi there,

we don’t have a solution for that. The scrolling effect would require Javasript and have nothing like that in my Gists.

The layout regarding the button shape you could simply use an icon for the button.
Or you can keep that Grid Column Square by using Flexbasis ( for width ) and Min-height.

If you paste this into the Code Editor view you can see an example:

<!-- wp:generateblocks/grid {"uniqueId":"403a48ce","columns":3,"verticalAlignment":"center","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/container {"uniqueId":"626e7c1d","isGrid":true,"gridId":"403a48ce","widthMobile":100,"flexGrow":1,"isDynamic":true,"blockVersion":2} /-->

<!-- wp:generateblocks/container {"uniqueId":"5a814e3a","isGrid":true,"gridId":"403a48ce","widthMobile":100,"flexGrow":0,"flexBasis":"50","minHeight":50,"borderRadiusTopRight":"100","borderRadiusBottomRight":"100","borderRadiusBottomLeft":"100","borderRadiusTopLeft":"100","borderRadiusUnit":"%","backgroundColor":"var(\u002d\u002daccent)","verticalAlignment":"center","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"8e9c874f","element":"div","alignment":"center","fontWeight":"900","lineHeight":0.8} -->
<div class="gb-headline gb-headline-8e9c874f gb-headline-text">1</div>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"1e41756e","isGrid":true,"gridId":"403a48ce","widthMobile":100,"flexGrow":1,"paddingTop":"10","paddingRight":"10","paddingBottom":"10","paddingLeft":"10","paddingSyncUnits":true,"marginTop":"20","marginBottom":"20","marginLeft":"20","borderSizeTop":"1","borderSizeRight":"1","borderSizeBottom":"1","borderSizeLeft":"1","borderRadiusTopRight":"2","borderRadiusBottomRight":"2","borderRadiusBottomLeft":"2","borderRadiusTopLeft":"2","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"1fe1fa13","marginBottom":"5"} -->
<h2 class="gb-headline gb-headline-1fe1fa13 gb-headline-text">Item one</h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"42928f73","element":"div"} -->
<div class="gb-headline gb-headline-42928f73 gb-headline-text">Item one text</div>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sascha]

Thanks, David, never though about changing the flex-parameter 🙂

So now, I’d like to duplicate the main-container, so I have 3 underneath each other, but have the circle-containers connect with each other by a thin line. How can I accomplish this?

Thank you in advance and kind regards,
Sascha

[David]

That part you will need to figure out 🙂
You can try adding a left of right border to your containers, and then use negative margins to move the circle container over that border…. but to be honest we don’t have the tools for that kinda of design,

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts