1

I apologize if this has already been asked. I'm having a hard time finding an answer on my own. My CSS transitions are not very smooth. I've noticed this is becoming a pattern for me. I'm trying to figure out how to fix that. Is it faster to add/remove a class? Is it the high res images I'm using? Would JQuery be faster? Here's the codepen

https://codepen.io/tyl-er/pen/OgZmQg?editors=0010

let sidePanelOpen = false;

let urls = [
    'https://images.unsplash.com/photo-1498898733745-c8c6df58e4ba',
    'https://images.unsplash.com/photo-1499006619764-59e5b0c0e7ca',
    'https://images.unsplash.com/photo-1498503603722-8de8df0beb96'
];


function openNav() {
    document.getElementById("accordion").style.width = "60vw";
    document.getElementById("splash").style.width = "40vw";
    document.getElementById("splash").style.marginRight = "60vw";
    document.getElementById("splash").style.opacity = ".5";
}

function closeNav() {
    document.getElementById("accordion").style.width = "0";
    document.getElementById("splash").style.width = "100vw";
    document.getElementById("splash").style.marginRight = "0";
    document.getElementById("splash").style.opacity = "1";
    let item = urls[Math.floor(Math.random()*urls.length)];
    document.getElementById("splash").style.backgroundImage = "url(" + item + ")";
}

document.querySelector("#nav-toggle").addEventListener("click", function() {
    this.classList.toggle("active");
    sidePanelOpen = !sidePanelOpen;
    sidePanelOpen ? openNav() : closeNav();
});
Alireza
  • 2,319
  • 2
  • 23
  • 35
tyl-er
  • 97
  • 1
  • 3
  • 12
  • 1
    See this: What is [DOM reflow?](https://stackoverflow.com/questions/27637184/what-is-dom-reflow) – nicholaswmin Jul 06 '17 at 21:38
  • 1
    It's always faster to add and remove a class. And if I had to guess, the hi-res images you're resizing would be the most likely culprit -- try removing them entirely to see if you like the result. – Blazemonger Jul 06 '17 at 21:40

1 Answers1

4

Check out this article: Smooth as Butter: Achieving 60 FPS Animations with CSS3

In short, changing elements so that the browser has to re-calculate it's document flow is most likely causing your performance issues.

Swen
  • 767
  • 1
  • 9
  • 31