Please how do i achieve this?
I want to implement this design. Any help will be very much appreciated and if you have any idea of a codepen that’d be awesome! Thanks y’all
40 Replies
hey!! I think we can do it using multiple approachs. Once i saw a codepen using GSAP, but i think you can achieve something similar with pure js. But here is the link. I hope it helps: https://codepen.io/GreenSock/pen/qBPZELR
what i think straight away is that you are going to need to use a circle or semicircle inside a div with overflow hidden. transform-origin and rotate to position/animate the elements.
Awesome man! Thanks a lot. I actually needed that in GSAP. Thanks I’ll check it out:)
Just had a look at the file, it helps. So I think I will make the parent container overflow hidden then the circle a little more bigger, that way it hides sides but not the bottom. Maybe I’ll specify a particular height too. But now I have to figure out how to rotate it without a “next” and “previous” button
You could do this with CSS only by making the "years" as labels for hidden radio buttons. "checking" the radio buttons would rotate the container, placing the selected year and it's content at the top.
Love it!
thats very cool use case for :has selector
Thanks a lot @Chris Bolson ❤️
Hey man, please I’ve been struggling with this for days. I’m finding it hard to embed it on a particular section in my website. Most times it just jumps to another section when I’m rotating it. It’s been like 3days now. Please any help will really be appreciated
it'll be easier (or even possible at all) for folks to help if you share your results
alright, i will do that
Hey guys, so this is what i have. I will drop a video of what I want it to look like below. There’s a lot going on in the codepen that was provided above. It was kind of overwhelming I’d say. But that’s btw, any will be very much appreciated. Thanks once again
From the video above you can notice some buggy behaviors and all that
But this is what i want it to look like ☝️
this is the link to the site above: https://www.oandoplc.com/our-history
Our History - Oando PLC
Oando PLC is one of Africa’s largest integrated energy solutions provider with a proud heritage. It has a primary listing on the Nigeria Stock Exchange and a secondary listing on the Johannesburg Stock Exchange.
I feel this would be easier to be done with gsap
Can you share the link to what you have?
I saw the css as well , i think its too much for me 😓
okay, I’m trying to put it together on codepen. It’s still on my local
Btw, you can check out the website on your devtools
I will send the codepen shortly
Here’s the codepen:
https://codepen.io/Chinagorom-Charles/pen/wBwjyyB
Btw, here’s the outcome I’m working towards
The images will change just like the text do
Thank you everyone, will be waiting to hear from y’all:)
You will obviously need to fine-tune all the values to fit to your design.
The strangest thing that I notice is the jumping around of the whole block according to which "year" is selected. This appears to be due to the focusing on the hidden radio buttons - the browser appears to be tring to bring them into view. A quick fix for this (though not very accesible though I suspect that none of this is overly accesible) would be to replace the code that "hides" the radio button with a much simpler "display: none". This still allows the code to work but doesn't jump around.
I have forked your pen to be able to play around with the timeline within content.
As I say, it needed some fine-tuning as I had "cheated" in my original demo by giving the whole element a position "fixed" which fixed it in the center of the viewport - fine when there is no other content but clearly not possible when needing it as part of a larger website.
https://codepen.io/cbolson/pen/yyBjKNP
Awesome man, i will test this out now
Btw, i noticed the clip path thing use to clip the top of the wheel in someway
As @i_lost_to_loba_kreygasm says, it may be simpler with GSAP but it is still fun (at least in my mind) to try these things with CSS 😆
Yeah, that’s actually true
Cause i wanted to have a larger radius and caught it off just like the main website
In my original demo clip-path was simply cutting off the bottom half of the circle. Again, fine when there is no content after it. However that would leave a large space below the element as the browser would allow for the full height of the element. So, in this later demo, rather than using clip path I set a fixed height on a parent wrapper and set the over-flow to hidden, effectively chopping off the lower part of the timeline, with the advantage of not messing with the flow.
Ahaah, that makes sense now
clip-path is basically just a series of points which define what part of the element is visible. I personally like to start from the top left (x=0 y=0) and work my way round clockwise, defining each point where I want to "cut off" the visibility of the element.
By defining the height on the parent element you can now adjust that with media queries or whatever method you prefer. I know that generally it is suggested to avoid fixed heights but in this case it has a specific purpose.
Alright, noted
It’s possible for me to change the images based on the year that i click right?
You can either place the images within the timeline elements itself (like I did in this demo based on the same code) or place them outside the element. However, in this case, to be able to define which one to show you will either have to use JS or use the :has() selector on a global parent element (eg the body) to detect which radio button has been selected to then define which image to show.
Chris Bolson
CodePen
[cpc] Pokemon Slide Gallery (yet another circle gallery)
Yet another circular gallery. This one was for a CodePen challenge. I initially based the code on this previous pen https://codepen.io/cbolson/pen/vEB...
I heard clip path , so I felt inclined to post this website 😅 https://bennettfeely.com/clippy/
Bear in mind that a lot of this would be simpler with JS. I just like to try to do as much as possible with CSS.
Yes, that is a great tool.
However it doesn't hurt to understand how the paths are actually defined as that makes it easier to be able to manipulate them if needed 😉
A couple of demos of mine where I made use of clip-path manipulation
https://codepen.io/cbolson/pen/MWNOxvB
https://codepen.io/cbolson/pen/GRbzyGJ
I agree I should and those are some really cool clip path trickery
Dope stuff man!
Hmm, great. I will take a look at this
@Chris Bolson it’s working pretty well now. I just have to figure out how to add the images now, thank you
please ignore the background noise, so basically when i remove position absolute from the card-container it centers the wheel properly. But when i do so it aligns the wheel to the right. Even when there’s margin-inline:auto
Okay now I positioned it to the center using the left: 50% and transform translate: -50%
but i still have that issue with the clip path where it cuts off the top point
@Chris Bolson hey, i figured it out
I just had to remove the inset and added a top of 10% and it was centered perfectly and i was able to see all the numbers
now unto the next: putting my images inside the timeline 🙂
and i just added the images 🥹
thanks a lot everyone
especially @Chris Bolson and @i_lost_to_loba_kreygasm 🤍
i didnt do anything 😅
you helped lol