Fading an element using only Javascript

I saw a post on S/O looking for a pure Javascript solution to animation; then the body started talking about CSS. ??‍♂️ I decided to write a pure Javascript solution anyway that serves as a miniature example of tweening values linearly using time.

Exa…


This content originally appeared on DEV Community and was authored by Matt Kenefick

I saw a post on S/O looking for a pure Javascript solution to animation; then the body started talking about CSS. ??‍♂️ I decided to write a pure Javascript solution anyway that serves as a miniature example of tweening values linearly using time.

Example: https://jsfiddle.net/nqfud4j0/

It's intentionally using setInterval rather than requestAnimationFrame to demonstrate the example's use of time + controlled framerate rather than a delta or 'fast as possible.' A good solution would abstract this logic into a tweening library that combines both RAF + intervals to manage latency between frames.

Here's the commented code:

/**
 * Fade an HTMLElement to a specific value using style attributes
 * 
 * @param HTMLElement element
 * @param number toValue
 * @param number duration
 * @return void
 */
function fadeTo(element, toValue = 0, duration = 200) {
    // Store our element's current opacity 
    // (or default to 1 if null)
    const fromValue = parseFloat(element.style.opacity) || 1;

    // Mark the start time (in ms). We use this to calculate
    // a ratio over time that applied to our supplied duration 
    // argument
    const startTime = Date.now();

    // Determines time (ms) between each frame. Sometimes you 
    // may not want a full 60 fps for performance reasons or 
    // aesthetic 
    const framerate = 1000 / 60; // 60fps

    // Store reference to interval (number) so we can clear 
    // it later
    let interval = setInterval(() => {
        const currentTime = Date.now();

        // This creates a normalized number between now vs when we
        // started and how far into our desired duration it goes
        const timeDiff = (currentTime - startTime) / duration;

        // Interpolate our values using the ratio from above
        const value = fromValue - (fromValue - toValue) * timeDiff;

        // If our ratio is >= 1, then we're done.. 
        // so stop processing
        if (timeDiff >= 1) {
            clearInterval(interval);
            interval = 0;
        }

        // Apply visual. Style attributes are strings.
        element.style.opacity = value.toString();
    }, framerate)
}


// Element reference
const element = document.querySelector('div');

// Fade in and out on click
element.addEventListener('click', e => {
    // Animates our element from current opacity (1.0) to 0.25 for 1000ms
    fadeTo(element, 0.25, 1000);

    // Waits 1s, then animates our element's opacity to 1.0 for 500ms
    setTimeout(() => {
        fadeTo(element, 1.0, 500);
    }, 1000);
});


This content originally appeared on DEV Community and was authored by Matt Kenefick


Print Share Comment Cite Upload Translate Updates
APA

Matt Kenefick | Sciencx (2021-07-13T18:11:08+00:00) Fading an element using only Javascript. Retrieved from https://www.scien.cx/2021/07/13/fading-an-element-using-only-javascript/

MLA
" » Fading an element using only Javascript." Matt Kenefick | Sciencx - Tuesday July 13, 2021, https://www.scien.cx/2021/07/13/fading-an-element-using-only-javascript/
HARVARD
Matt Kenefick | Sciencx Tuesday July 13, 2021 » Fading an element using only Javascript., viewed ,<https://www.scien.cx/2021/07/13/fading-an-element-using-only-javascript/>
VANCOUVER
Matt Kenefick | Sciencx - » Fading an element using only Javascript. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/07/13/fading-an-element-using-only-javascript/
CHICAGO
" » Fading an element using only Javascript." Matt Kenefick | Sciencx - Accessed . https://www.scien.cx/2021/07/13/fading-an-element-using-only-javascript/
IEEE
" » Fading an element using only Javascript." Matt Kenefick | Sciencx [Online]. Available: https://www.scien.cx/2021/07/13/fading-an-element-using-only-javascript/. [Accessed: ]
rf:citation
» Fading an element using only Javascript | Matt Kenefick | Sciencx | https://www.scien.cx/2021/07/13/fading-an-element-using-only-javascript/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.