setInterval: Why is it slow?

Hi everyone,

I started out with Web Developement about two weeks ago and decided to step up my game with JavaScript 3 days ago.

One of my pet projects was to get my navigation bar to slide in from the left side on a button click and slide out on an other click.
I have researched many sites and forums until I decided to use the setInterval function as the core of my navigation bar.

I created my test code for a navigation bar and rewrote it many times but the animation stayed way to slow. I wanted to get an animation like the one on the website of IBM on the top-right corner (https://www.ibm.com/us-en/?lnk=fcc). Or at least try to match the speed of it without ease in and out.

Here is the link to my code: https://codepen.io/Bromin257/pen/xBzZvE

Is there any way to solve this with setInterval or should I try other methods? Any help would be appreciated.

1 Like

For this effect we would not use a timeout, hence no setInterval. We’re not timing, but triggering and easing a screen effect.

Timing is a pretty complex operation and needs to be carefully controlled. Until you are fluent in HTML, CSS and JS I would suggest not going down that path, just yet.

CSS offers easing on all transitions, which effects can be applied to any change in property value.

<ul id="daedalornithes">
  <li>Aegothelidae: owlet-nightjars</li>
  <li>Hemiprocnidae: treeswifts</li>
  <li>Apodidae: swifts</li>
  <li>Trochilidae: hummingbirds</li>
</ul>
    #daedalornithes {
        transition: width 0.5s ease;
        width: 0;
        list-style-type: none;
        padding: 0;
    }
    #daedalornithes:hover {
        width: 250px;
    }

The above is not pretty, but it demonstrates transition and easing.

https://repl.it/@mtf/transition

1 Like