Kevin Powell - Community•10mo ago

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•10mo ago

it's a bit unclear for me to be honest. Do you have a visual representation of what you want to acchieve

ἔρως•10mo ago

please, dont there's good reasons why flashing and blinking isnt used in the web

b1mind•10mo ago

stop being the destroyer of fun you just put it behind a prefers-reduced-motion 😉

ἔρως•10mo ago

flashing and blinking?

ἔρως•10mo ago

https://tenor.com/view/ahh-damn-alright-gif-25731846

Tenor

ἔρως•10mo ago

i guess you're right what do you have so far? what's the website/code? where can we see it?

uliana3412OP•10mo 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! 🙂

ἔρως•10mo ago

did you build anything? or it's just a concept of what you want?

uliana3412OP•10mo 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

ἔρως•10mo ago

then show us what you actually have

Darryll•10mo 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

ἔρως•10mo ago

that's what i had in mind as well

MarkBoots•10mo ago

thought it was a fun challenge, so played a little with it https://codepen.io/MarkBoots/pen/LYaJrPx

Mark Boots

CodePen

LYaJrPx

...

ἔρως•10mo ago

if you are going to do that, why not an animated svg? nevermind, this setup seems actually easier

uliana3412OP•10mo 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•10mo ago

well you can add a class to the corresponding line that activates the animation, when the traffic is happening.

uliana3412OP•10mo ago

you're a genius, thanks again!

MarkBoots•10mo ago

i've updated the pen. with a data-active=true on the line element you can control the animation to show or not

ἔρως•10mo 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•10mo ago

yea, that is possible too, just adding another data attribute that changes the direction

ἔρως•10mo ago

or just a single one for all 3

MarkBoots•10mo ago

yea, one idle, one left, one right. true can just rotate the thing

ἔρως•10mo 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•10mo ago

not the way i've set it up unfortunatly... (out of my head)

ἔρως•10mo 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•10mo 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.

ἔρως•10mo ago

it can be active-charge or active-discharge oh yeah, that is no bueno you have to rewrite the animation

MarkBoots•10mo ago

i will revisit it later, not at my desk rn

ἔρως•10mo ago

i hate this idea, but rotating might be the best option

MarkBoots•10mo 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)

ἔρως•10mo ago

yeah, i guess it is the easiest way

MarkBoots•10mo 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

ἔρως•10mo ago

nice

uliana3412OP•10mo ago

WOW! That's impressive with all these added changes! I can't thank you enough @MarkBoots and @ἔρως for your remarks. Thanks!

ἔρως•10mo ago

he did all the work, but, you're welcome

MarkBoots•10mo ago

you provided some good tips and suggestions @ἔρως 😉

ἔρως•10mo ago

just small pointers

uliana3412OP•10mo 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!

ἔρως•10mo ago

the rotate is for the animation to be correct the position should be to have the line coming from the bottom

MarkBoots•10mo 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)

ἔρως•10mo ago

basically what i said 🤣 (im joking)

uliana3412OP•10mo 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•10mo 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

uliana3412OP•10mo 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•10mo 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)

uliana3412OP•10mo ago

aaaahhh okay! got it! 😃

MarkBoots•10mo 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)

uliana3412OP•10mo ago

Yes, that is perfect! Thank you

MarkBoots•10mo 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)

uliana3412OP•10mo 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•10mo ago

in this case not, but if you need it, it's there those are commented out in the html

uliana3412OP•10mo 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•10mo 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

uliana3412OP•10mo 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•10mo 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

uliana3412OP•10mo 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•10mo 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

uliana3412OP•10mo 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•10mo 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)

uliana3412OP•10mo 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•10mo 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

uliana3412OP•10mo 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 …

ἔρως•10mo 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

uliana3412OP•10mo ago

Thank you @ἔρως ! I got a lot to learn yet. Thank you all for helping me out !

ἔρως•10mo ago

you're welcome and good luck

uliana3412OP•10mo ago

I hope my final project won’t look this way 😂😅

uliana3412OP•10mo ago

Thank you guys!!! With your help, it shouldn’t now!

ἔρως•10mo ago

if it ends like that, at least you released, which is very good

uliana3412OP•10mo 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 🙂

ἔρως•10mo 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

uliana3412OP•10mo ago

Thank you very much @ἔρως . I hope you enjoy your week-end ! 🙂

ἔρως•10mo ago

you're welcome, im enjoying it so far

MarkBoots•10mo 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)

ἔρως•10mo ago

that makes sense, thank you i really struggle with the slash syntax

MarkBoots•10mo 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

ἔρως•10mo ago

that makes perfect sense

uliana3412OP•10mo 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>

uliana3412OP•10mo ago

And what I have so far ...

ἔρως•10mo ago

you should make a new post so each post is a specific topic

Gaming

Programming

How to create flashing lines between grid items?