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
it's a bit unclear for me to be honest. Do you have a visual representation of what you want to acchieve
please, dont
there's good reasons why flashing and blinking isnt used in the web
stop being the destroyer of fun
you just put it behind a prefers-reduced-motion 😉
flashing and blinking?
i guess you're right
what do you have so far? what's the website/code? where can we see it?
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! 🙂
did you build anything?
or it's just a concept of what you want?
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
then show us what you actually have
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
that's what i had in mind as well
thought it was a fun challenge, so played a little with it
https://codepen.io/MarkBoots/pen/LYaJrPx
if you are going to do that, why not an animated svg?
nevermind, this setup seems actually easier
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?
well you can add a class to the corresponding line that activates the animation, when the traffic is happening.
you're a genius, thanks again!
i've updated the pen. with a
data-active=true on the line element you can control the animation to show or notyou 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
yea, that is possible too, just adding another data attribute that changes the direction
or just a single one for all 3
yea, one idle, one left, one right. true
can just rotate the thing
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
not the way i've set it up unfortunatly... (out of my head)
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
They way i have set it up, changing the direction will let it go from filled to empty, instead of actually changing the dir.
it can be active-charge or active-discharge
oh
yeah, that is no bueno
you have to rewrite the animation
i will revisit it later, not at my desk rn
i hate this idea, but rotating might be the best option
yea, think so too. way of least resistance. im already rotating some of them anyway (so i can have the same animation for all)
yeah, i guess it is the easiest way
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 / outnice
WOW! That's impressive with all these added changes! I can't thank you enough @MarkBoots and @ἔρως for your remarks. Thanks!
he did all the work, but, you're welcome
you provided some good tips and suggestions @ἔρως 😉
just small pointers
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!
the rotate is for the animation to be correct
the position should be to have the line coming from the bottom
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)basically what i said 🤣
(im joking)
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?
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
right but why do you have left-poistion here? &[data-line^=right]{ --l: 100%; --rotate: 0deg } it's right from the purple item..
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)
aaaahhh okay! got it! 😃
i could've used right: line-length * -1. but i wanted all to use the same top/left properties. (reduce the code a bit)
Yes, that is perfect! Thank you
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)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"...
in this case not, but if you need it, it's there
those are commented out in the html
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 }
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 moreI am sorry but didn't you do that with &[data-line^=top] { --t: calc(var(--ll) / -2 - var(--ls) / 2); --rotate: -90deg }?
$=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 leftOk 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...
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
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!!!!😃 😃 😃
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)
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.
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 oftenThank 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 …
line is the element
dataset is an api that interacts with the data-* attributes in the html element
state is the data-state attribute
Thank you @ἔρως ! I got a lot to learn yet. Thank you all for helping me out !
you're welcome
and good luck
I hope my final project won’t look this way 😂😅
Thank you guys!!!
With your help, it shouldn’t now!
if it ends like that, at least you released, which is very good
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 🙂
--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
Thank you very much @ἔρως . I hope you enjoy your week-end ! 🙂
you're welcome, im enjoying it so far
can be rewritten as
that makes sense, thank you
i really struggle with the slash syntax
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
that makes perfect sense
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! 🙂 `
That's my React code : `
And what I have so far ...
you should make a new post
so each post is a specific topic