How to create flashing lines between grid items?

Hello everyone, I am building a menu component made of square items and I would like to link them with flashing lines, themeselves made of rounds, like a charging bar, one after another, they will be on and off. Do you know if it is possible in CSS? I am using display: grid and I would like to put these lines exactly where my grid lines are going. Which property should I use? Thank you a lot for any advice :)!
79 Replies
MarkBoots
MarkBoots9mo ago
it's a bit unclear for me to be honest. Do you have a visual representation of what you want to acchieve
ἔρως
ἔρως9mo ago
please, dont there's good reasons why flashing and blinking isnt used in the web
b1mind
b1mind9mo ago
stop being the destroyer of fun you just put it behind a prefers-reduced-motion 😉
ἔρως
ἔρως9mo ago
flashing and blinking?
ἔρως
ἔρως9mo ago
i guess you're right what do you have so far? what's the website/code? where can we see it?
uliana3412
uliana34129mo ago
Hey guys! Well that’s a design I want to rebuild. See these dots between items? They flash on and off one by one like a battery charger. I guess I need to design individual dots between the items to « link » them and find a way to make them flashing… :think: Thank you a lot for any suggestions! 🙂
No description
ἔρως
ἔρως9mo ago
did you build anything? or it's just a concept of what you want?
uliana3412
uliana34129mo ago
I built square items using the grid and linked them with other divs 😃 I don’t know how to make it conceptuelly with dots and with this animation effect
ἔρως
ἔρως9mo ago
then show us what you actually have
Darryll
Darryll9mo ago
Based on your requirements of just having some animation that loops regularly I think you're looking to figure out how keyframes and CSS animations work You can basically make a timeline and loop animations however you want It's like a whole concept to study so willl take a while to fully understand so you'll have to just go study it for a bit If you want to work in anything more complicated than that it's a whole other more complicated task
ἔρως
ἔρως9mo ago
that's what i had in mind as well
MarkBoots
MarkBoots9mo ago
thought it was a fun challenge, so played a little with it https://codepen.io/MarkBoots/pen/LYaJrPx
ἔρως
ἔρως9mo ago
if you are going to do that, why not an animated svg? nevermind, this setup seems actually easier
uliana3412
uliana34129mo ago
Thank you all for your answers! Thank you very much @MarkBoots for your time and making it work so nicely!😃 I went through your code several times, I am still trying to figure out all of the calculations you performed... I have to dive deeper into CSS animations! The backend logic behind these dots is to make them flashing on and off when there is a data traffic coming in from MQTT broker. Do you thnik it is feasible with this CSS?
MarkBoots
MarkBoots9mo ago
well you can add a class to the corresponding line that activates the animation, when the traffic is happening.
uliana3412
uliana34129mo ago
you're a genius, thanks again!
MarkBoots
MarkBoots9mo ago
i've updated the pen. with a data-active=true on the line element you can control the animation to show or not
ἔρως
ἔρως9mo ago
you should use a state, since you can have electricity flowing in both directions for example, when charging a battery, it doesnt make sense for the animation to go away from the battery
MarkBoots
MarkBoots9mo ago
yea, that is possible too, just adding another data attribute that changes the direction
ἔρως
ἔρως9mo ago
or just a single one for all 3
MarkBoots
MarkBoots9mo ago
yea, one idle, one left, one right. true can just rotate the thing
ἔρως
ἔρως9mo ago
in the future, if you want to change the color for charging states (low current, high current), then this works too or animation direction i think you can play it backwards
MarkBoots
MarkBoots9mo ago
not the way i've set it up unfortunatly... (out of my head)
ἔρως
ἔρως9mo ago
it can, but im on my phone and suggesting edits is nearly impossible its already hell to thpe type you can use [data-status=idle] as idle then [data-status|=active] for any active state
MarkBoots
MarkBoots9mo ago
They way i have set it up, changing the direction will let it go from filled to empty, instead of actually changing the dir.
ἔρως
ἔρως9mo ago
it can be active-charge or active-discharge oh yeah, that is no bueno you have to rewrite the animation
MarkBoots
MarkBoots9mo ago
i will revisit it later, not at my desk rn
ἔρως
ἔρως9mo ago
i hate this idea, but rotating might be the best option
MarkBoots
MarkBoots9mo ago
yea, think so too. way of least resistance. im already rotating some of them anyway (so i can have the same animation for all)
ἔρως
ἔρως9mo ago
yeah, i guess it is the easiest way
MarkBoots
MarkBoots9mo ago
done. data-state: out | idle | in or data-state: 1 | 0 | -1 (to make it easier for js) (idle is default, so data-state doesn't have to be present) even added the option to color in / out
ἔρως
ἔρως9mo ago
nice
uliana3412
uliana34129mo ago
WOW! That's impressive with all these added changes! I can't thank you enough @MarkBoots and @ἔρως for your remarks. Thanks!
ἔρως
ἔρως9mo ago
he did all the work, but, you're welcome
MarkBoots
MarkBoots9mo ago
you provided some good tips and suggestions @ἔρως 😉
ἔρως
ἔρως9mo ago
just small pointers
uliana3412
uliana34129mo ago
Could I ask you few questions about your CSS code @MarkBoots ? I am sure @ἔρως you know it as well! To be honest, most of the code is absolutely new to me! When you determine the position of the dots relative to their parent ( a purle item, right?), how did you perform calculations? Here, &[data-line^=top] { --t: calc(var(--ll) / -2 - var(--ls) / 2); --rotate: -90deg }. Why do you rotate it and why it is positioned negatively? How do you know where to position them and how to rotate them? That's awesome! Many thanks again!
ἔρως
ἔρως9mo ago
the rotate is for the animation to be correct the position should be to have the line coming from the bottom
MarkBoots
MarkBoots9mo ago
the lines are positioned absolute relative to the card. I position them outside of it with the top and left position. I already know the line-length (ll) is 50% (the way how the grid is set up). so for example a line at the left-center: left-position: line-length * -1; top-position: 50% - line-size / 2 the rotations are so i can reuse the same animation. the top and bottom are going vertically (so rotated 90deg / -90deg), the left is rotated 180deg so the animation goes from right to left)
ἔρως
ἔρως9mo ago
basically what i said 🤣 (im joking)
uliana3412
uliana34129mo ago
I am sorry to seem stupid to you guys but I didn't get it. Where are these left-position and top-position? relative to the purple item?
MarkBoots
MarkBoots9mo ago
yep, all is relative to the purple item. the lines in the html are inside of that one you can also put them in the other cards. no problem
uliana3412
uliana34129mo ago
right but why do you have left-poistion here? &[data-line^=right]{ --l: 100%; --rotate: 0deg } it's right from the purple item..
MarkBoots
MarkBoots9mo ago
okay. so when a line is at the right side. it is positioned 100% to the left of the card (and it doesnt need to rotate, already in correct direction)
uliana3412
uliana34129mo ago
aaaahhh okay! got it! 😃
MarkBoots
MarkBoots9mo ago
i could've used right: line-length * -1. but i wanted all to use the same top/left properties. (reduce the code a bit)
uliana3412
uliana34129mo ago
Yes, that is perfect! Thank you
MarkBoots
MarkBoots9mo ago
no problem (btw, sorry for not responding to the dm, If I start doing that, my inbox will be flooded. When I have time, I'm here 😉 ) ohw and maybe to explain a bit how the selectors work (maybe that throws you of a bit too) &[data-line^=right] - &: needed syntax for css nesting, we look for a [data-line] && [data-line^=right] - [data-line]: attribute selector - ^=right: startsWith 'right' - $=top: endsWith 'top' I could've written it out more (but it's just my style)
uliana3412
uliana34129mo ago
Thank you! I figured it out. Except this : &[data-line$=right]{ --l: calc(87.5% - var(--ll) / 2) }. There is no elements ending with "right"...
MarkBoots
MarkBoots9mo ago
in this case not, but if you need it, it's there those are commented out in the html
uliana3412
uliana34129mo ago
okay!thanks! Tell me please what this one is for: &[data-line=top-center], &[data-line=bottom-center]{ --l: calc(50% - var(--ll) / 2) } ? you already did this &[data-line^=top] { --t: calc(var(--ll) / -2 - var(--ls) / 2); --rotate: -90deg }
MarkBoots
MarkBoots9mo ago
correct, unfortunatly they interfere with the left and right center, so i had to be more specific i could have used middle for the vertical axis, but liked center for both more
uliana3412
uliana34129mo ago
I am sorry but didn't you do that with &[data-line^=top] { --t: calc(var(--ll) / -2 - var(--ls) / 2); --rotate: -90deg }?
MarkBoots
MarkBoots9mo ago
$=center can be on ^top|bottom but also ^left|right, so that's why i had to specify it im only setting the position btw, not the sizing or rotation. left|right center is 50% from the top top|bottom center is 50% from the left
uliana3412
uliana34129mo ago
Ok thank you! It's very clear now😃 Just onemore question if you allow me, the last part of your code starting from &::after { what is that for? I know it's a pseudo element but I am not sure what exactly it does...
MarkBoots
MarkBoots9mo ago
in this case i have 2 sets of dots. - one set (the idle) is set as background on the main line element) - the second set (the colored) is placed on top of it in a pseudo element with the same size). * that pseudo element is translated to right (and hidden thanks to the overflow on the main element). the animation makes it go to the left. so the colored dots appear if you comment out overflow:hidden on line 42, you see what is happening
uliana3412
uliana34129mo ago
Thank you very much for your explanations! I’m very grateful for all of your help! I am going to re-read your code again, maybe several times, and try to implement my backend then. Thank you!!!!😃 😃 😃
MarkBoots
MarkBoots9mo ago
no problem, glad I could help. Good luck on the project! (make sure you copy or fork the pen, I can't guarantee it will stay online)
uliana3412
uliana34129mo ago
Done 😉 Let's be crazy before the week-end, I will ask you another question! Forgive me! 🙂 which part of your code control the animation itself? @keyframes? I am thinking about where to insert a class to the line that will activate the animation. I will use a react function to trigger it where I will be receiving the data.
MarkBoots
MarkBoots9mo ago
in this case you can control it by setting the data-state on the html line element the options are : [ "out" | "idle" | "in" ] or if it is easier [ 1 | 0 | -1 ] in the css, lines 59 to 64 take care of that <div data-line="top-center" data-state="out"></div> moves outwards <div data-line="right-bottom" data-state="idle"></div> is idle <div data-line="right-top" data-state="in"></div> moves inwards in JS you can control it by setting line.dataset.state = 'out' or 1 if you don't set it at all, it will be idle by default That said, for me it is weekend now. I will still be online, but not as often
uliana3412
uliana34129mo ago
Thank you! I will re-read your code. I learnt a lot today with you. Thank you very much! 🙂 I wish you a good week-end ! 🙂 P.S why do you use line.dataset.state ? I am using a React framework for my frontend. It must be different …
ἔρως
ἔρως9mo ago
line is the element dataset is an api that interacts with the data-* attributes in the html element state is the data-state attribute
uliana3412
uliana34129mo ago
Thank you @ἔρως ! I got a lot to learn yet. Thank you all for helping me out !
ἔρως
ἔρως9mo ago
you're welcome and good luck
uliana3412
uliana34129mo ago
I hope my final project won’t look this way 😂😅
No description
uliana3412
uliana34129mo ago
Thank you guys!!! With your help, it shouldn’t now!
ἔρως
ἔρως9mo ago
if it ends like that, at least you released, which is very good
uliana3412
uliana34129mo ago
I was re-reading the code. There is a few things that I don't really get. Here, background: radial-gradient (circle, var(--dc) var(--dg)) center / var(--ds); And this line of code : animation: animateLines var(--animation-duration) steps(var(--dots)) infinite. That's all 🙂
ἔρως
ἔρως9mo ago
--animation-duration is the time, in seconds or milliseconds (E.g.: 2s or 500ms) --dots is the number of dots that you have that is, instead of being a smooth animation, it will "jump" a total of --dots times the gradient is harder for me to decifer, as i absolutely detest the slash syntax and don't know what it is for for everything, it's something completely non-sensical but, if you press f12 and inspect the ::before element, you can see what's happening to the background but, that seems to be what generates the dots
uliana3412
uliana34129mo ago
Thank you very much @ἔρως . I hope you enjoy your week-end ! 🙂
ἔρως
ἔρως9mo ago
you're welcome, im enjoying it so far
MarkBoots
MarkBoots9mo ago
background: radial-gradient(circle, var(--dc) var(--dg)) center / var(--ds); /*shorthand propety*/
background: radial-gradient(circle, var(--dc) var(--dg)) center / var(--ds); /*shorthand propety*/
can be rewritten as
background-image: radial-gradient(circle, var(--dc) var(--dg)); /* dot */
background-position: center;
background-size: var(--ds);
/* all these are for a single dot, but will be repeated over the full size of the element (space for 5 dots)
background-image: radial-gradient(circle, var(--dc) var(--dg)); /* dot */
background-position: center;
background-size: var(--ds);
/* all these are for a single dot, but will be repeated over the full size of the element (space for 5 dots)
ἔρως
ἔρως9mo ago
that makes sense, thank you i really struggle with the slash syntax
MarkBoots
MarkBoots9mo ago
i can imagine, had that too. but when i started combining multiple bg's with multiple different bg properties, it just made more sense. keep it on 1 line with all properties together per bg
ἔρως
ἔρως9mo ago
that makes perfect sense
uliana3412
uliana34129mo ago
Thank you very much @MarkBoots ! Hello @ἔρως and @MarkBoots ! I hope you are doing great. I built a slider bar to unlock the screen and I wanted to add some animation to the text like here https://codepen.io/maciekmaciej/pen/qZeNGY. My CSS code is not correct. Could you have a glance at my code if you have a little bit of time please? Thank you very much! 🙂
.track_drag {
border: 0.1px solid black;
width: 350px;
height: 60px;
left:700px;
top: 50%;
display: flex;
align-items: center;
position: absolute;
overflow: hidden;
border-radius: 7px;
touch-action: none;
background: url("../../assets/galaxy.jpg");
grid-row-start: 9;
grid-row-end: span 2;
}

#item {
width: 60px;
height: 50px;
justify-self: flex-start;
background-color: rgb(51, 66, 165);
border: 10px solid rgb(100, 66, 165);
border-radius: 20px;
/*touch-action: none;
user-select: none;*/
z-index: 999;
margin: 11px 1px;
background-size: 40% 40%;
background-repeat: no-repeat;
background-position: center;
background-image: url("a very long URL");
}
#item:active {
background-color: rgb(160, 153, 249);
border-color: rgb(100, 153, 249) !important;
}
#item:hover {
cursor: move;
border-color: rgba(136, 136, 136, .25);
}
.track_text {
height: 100%;
width: 100%;
position: absolute;
font: normal 15vh sans-serif;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: black;
animation: slide 3s infinite ease-in-out;
}

@keyframes slide {
0% {
background-position: -100vh center;
}
60%, 100% {
background-position: 100vh center;
}
}
.slide {
animation: slide 3s infinite ease-in-out;
}
.track_drag {
border: 0.1px solid black;
width: 350px;
height: 60px;
left:700px;
top: 50%;
display: flex;
align-items: center;
position: absolute;
overflow: hidden;
border-radius: 7px;
touch-action: none;
background: url("../../assets/galaxy.jpg");
grid-row-start: 9;
grid-row-end: span 2;
}

#item {
width: 60px;
height: 50px;
justify-self: flex-start;
background-color: rgb(51, 66, 165);
border: 10px solid rgb(100, 66, 165);
border-radius: 20px;
/*touch-action: none;
user-select: none;*/
z-index: 999;
margin: 11px 1px;
background-size: 40% 40%;
background-repeat: no-repeat;
background-position: center;
background-image: url("a very long URL");
}
#item:active {
background-color: rgb(160, 153, 249);
border-color: rgb(100, 153, 249) !important;
}
#item:hover {
cursor: move;
border-color: rgba(136, 136, 136, .25);
}
.track_text {
height: 100%;
width: 100%;
position: absolute;
font: normal 15vh sans-serif;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: black;
animation: slide 3s infinite ease-in-out;
}

@keyframes slide {
0% {
background-position: -100vh center;
}
60%, 100% {
background-position: 100vh center;
}
}
.slide {
animation: slide 3s infinite ease-in-out;
}
` That's my React code :
<div className="track_drag animate" ref={containerRef} onMouseDown={dragStart} onMouseUp={dragEnd} onMouseMove={drag}>
<div id="item" ref={dragItemRef}></div>
<p className="track_text track_text--before animate" ref={beforeRef}>Slide to unlock</p>
</div>
<div className="track_drag animate" ref={containerRef} onMouseDown={dragStart} onMouseUp={dragEnd} onMouseMove={drag}>
<div id="item" ref={dragItemRef}></div>
<p className="track_text track_text--before animate" ref={beforeRef}>Slide to unlock</p>
</div>
`
uliana3412
uliana34129mo ago
And what I have so far ...
No description
ἔρως
ἔρως9mo ago
you should make a new post so each post is a specific topic
Want results from more Discord servers?
Add your server