Kevin Powell - Community•3y ago

How do I use a JavaScript variable in CSS or SASS?

I am working on a portfolio website. The layout design I'm going for has four, square nav buttons, aligned as a bigger square, centered on the screen. I am trying to add an animation on a button, so when clicked on its position changes, moving the buttons to different corners of the screen, reveling the main content. How do I use a JavaScript element.getBoundingClientRect() variable to use as the 0% starting position in the animation for CSS?

21 Replies

b1mind•3y ago

I'd look into FLIP technique maybe. But to answer your question, you could assign the JS value to a inline CSS custom prop, or toggle the animation class completely

jj_roby_1993OP•3y ago

Im not familiar with FLIP technique. I just googled it. Actually looks interesting. Pretty much the final position is hard coded, then inverted as the first position, and the transition just needs to be set to none to see the animation...?

b1mind•3y ago

More or less ya. you take a snap shot of original pos, and use that to animate back to. I'm not entirely clear in your vision but it's what first popped in my head reading.

jj_roby_1993OP•3y ago

Here is a Figma prototype with the animation mock-up. Only Portfolio and About buttons work. https://www.figma.com/proto/Ivlj1ciCBtTUJCw2eYsOq9/Roswell.pics?node-id=5%3A51&scaling=scale-down&page-id=0%3A1&starting-point-node-id=5%3A51

b1mind•3y ago

I'll try to check when I'm back at my PC

jj_roby_1993OP•3y ago

Cool. Much appreciated 👍

b1mind•3y ago

says not found or no permissions public open for guests? I'm not super familiar with sharing on figma lol

jj_roby_1993OP•3y ago

oh my bad, let me change permissions

jj_roby_1993OP•3y ago

should be able to view it. Maybe you need an account, its free to make one. But heres a screen capture.

b1mind•3y ago

Yea totally would use FLIP

jj_roby_1993OP•3y ago

the problem is an animaiton in css needs a 0% {} starting value. I can get the value using javascript, but how do i use that in css.

.portfolio-btn {
  transform: translate(100%, 100%);
  background: var(--primary-clr);
  &.view {
    animation: portfolio-view 0.5s ease-in-out forwards;
  }
}
@keyframes portfolio-view {
  0% {

  }
  100% {
    top: 0;
    left: 0;
  }
}

.portfolio-btn {
  transform: translate(100%, 100%);
  background: var(--primary-clr);
  &.view {
    animation: portfolio-view 0.5s ease-in-out forwards;
  }
}
@keyframes portfolio-view {
  0% {

  }
  100% {
    top: 0;
    left: 0;
  }
}

b1mind•3y ago

So you could apply custom props then pass it a new value via JS in a inline style like

  0% {
    top: var(--top);
    left: var(--left);
}

  0% {
    top: var(--top);
    left: var(--left);
}

jj_roby_1993OP•3y ago

so can you do custom props for @keyframes name {} but thoes custom props --top and --left are css values and i only know how to get that value from js what would the js look like?

b1mind•3y ago

then apply the

.portfolio-button.setProperty('style', `--top: ${getRecValue};`);

.portfolio-button.setProperty('style', `--top: ${getRecValue};`);

bah template lits in a codeblock owning me lol

jj_roby_1993OP•3y ago

so im not very good in javascript but this is what i wrote, it doesnt work lol

portfolio_btn.addEventListener("click", () => {
  let rect = portfolio_btn.getBoundingClientRect();
  portfolio_btn.setProperty('style', `--top:                 ${rect.top};`);
  portfolio_btn.setProperty('style', `--left:                ${rect.left};`);
  portfolio_btn.classList.add(view);
})

portfolio_btn.addEventListener("click", () => {
  let rect = portfolio_btn.getBoundingClientRect();
  portfolio_btn.setProperty('style', `--top:                 ${rect.top};`);
  portfolio_btn.setProperty('style', `--left:                ${rect.left};`);
  portfolio_btn.classList.add(view);
})

b1mind•3y ago

Yea I'm not great when it comes to keyframes so we both kinda out of our element lol. I don't really use css animations just transitions. I reach for GSAP for most my stuff like this. Also without a demo this kinda stuff is really hard to debug/play with. I always say "Codepen or bust" Does it show the styles getting the correct values? it just doesnt animate?

jj_roby_1993OP•3y ago

getting an error in the console:

Uncaught ReferenceError: view is not defined
    at HTMLButtonElement.<anonymous> (script.js:20:33)

Uncaught ReferenceError: view is not defined
    at HTMLButtonElement.<anonymous> (script.js:20:33)

.portfolio-btn {
  transform: translate(100%, 100%);
  background: var(--primary-clr);
}
.portfolio-btn.view {
  animation: portfolio-view 0.5s ease-in-out forwards;
}
@keyframes portfolio-view {
  0% {

  }
  100% {
    top: 0;
    left: 0;
  }
}

.portfolio-btn {
  transform: translate(100%, 100%);
  background: var(--primary-clr);
}
.portfolio-btn.view {
  animation: portfolio-view 0.5s ease-in-out forwards;
}
@keyframes portfolio-view {
  0% {

  }
  100% {
    top: 0;
    left: 0;
  }
}

b1mind•3y ago

ooo cause you are trying to assign a var not a class portfolio_btn.classList.add('view') sorry no dot I think 🤔 also you probably want to use toggle?

jj_roby_1993OP•3y ago

ahh forogt the quotes

b1mind•3y ago

See this is where FLIP comes in really handy cause you are going to have to give state and check if its in one or the other 🤔 guess you could check if (btn.classList.contains('view') { animate back}

jj_roby_1993OP•3y ago

👍

Gaming

Programming

How do I use a JavaScript variable in CSS or SASS?