Kevin Powell - Community•14mo ago

How can I disable image animations that run when a web page reloads?

I'm building a webapplication and have run into a problem. I'm trying to recreate the logo which is displayed on Disney+ (https://www.disneyplus.com/en-se) in the upper left corner. The logo appears when the user is scrolling down and disappears when the user is scrolling up. My logo is appearing/disappearing when I scroll down/up. The only problem with my logo is that it will shortly appear and disappear everytime I reload the page. Is there a way to get rid of this? I've tried to solve it on my own, with ChatGPT and with YouTube (https://www.youtube.com/watch?v=4prVdA7_6u0&ab_channel=KevinPowell) but it didn't work.

<a href="#header">
    <img src="images/7.png" alt="logo" id="logo_image_2" class="logo_invisible">
</a>

<a href="#header">
    <img src="images/7.png" alt="logo" id="logo_image_2" class="logo_invisible">
</a>

#logo_image_2{
    position: fixed;
    width: 100px;
    left: 25px;
    top: 27.5px;
    z-index: 10;
}
.logo_invisible{
    animation: fade_out 1s forwards;
    pointer-events: none;
}
.logo_visible{
    animation: fade_in 1s forwards;
}
@keyframes fade_in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fade_out {
    100% {
        opacity: 0;
    }
    0% {
        opacity: 1;
    }
}

#logo_image_2{
    position: fixed;
    width: 100px;
    left: 25px;
    top: 27.5px;
    z-index: 10;
}
.logo_invisible{
    animation: fade_out 1s forwards;
    pointer-events: none;
}
.logo_visible{
    animation: fade_in 1s forwards;
}
@keyframes fade_in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fade_out {
    100% {
        opacity: 0;
    }
    0% {
        opacity: 1;
    }
}

const logo_image_2 = document.querySelector("#logo_image_2");
const section_1 = document.querySelector("#page1_section1");

function visible(){
    logo_image_2.classList.add("logo_visible");
    logo_image_2.classList.remove("logo_invisible");
}

function invisible(){
    logo_image_2.classList.add("logo_invisible");
    logo_image_2.classList.remove("logo_visible");
}

//When we scroll down, logo_image_2 will become visible
const section_1_options = {
    rootMargin: "-100px 0px 0px 0px"
};

const section_1_observer = new IntersectionObserver(function(
    entries,
    section_1_observer
){
entries.forEach(entry =>{
    if(!entry.isIntersecting){
        visible();
    }
    else{
        invisible();
    }
})
}, section_1_options);

section_1_observer.observe(section_1);

const logo_image_2 = document.querySelector("#logo_image_2");
const section_1 = document.querySelector("#page1_section1");

function visible(){
    logo_image_2.classList.add("logo_visible");
    logo_image_2.classList.remove("logo_invisible");
}

function invisible(){
    logo_image_2.classList.add("logo_invisible");
    logo_image_2.classList.remove("logo_visible");
}

//When we scroll down, logo_image_2 will become visible
const section_1_options = {
    rootMargin: "-100px 0px 0px 0px"
};

const section_1_observer = new IntersectionObserver(function(
    entries,
    section_1_observer
){
entries.forEach(entry =>{
    if(!entry.isIntersecting){
        visible();
    }
    else{
        invisible();
    }
})
}, section_1_options);

section_1_observer.observe(section_1);

Disney+

Disney+ | Stream new Originals, blockbusters and series

The streaming home of Disney, Marvel, Pixar, Star Wars, National Geographic, and so much more. Bringing the best movies, shows, and Originals.

Kevin Powell

YouTube

Animate from display none

A common problem people ask me about is animating from, or to display: none, since it's not an animatable property. After making my recent video on the dialog element, I got a lot of questions about animating it in and out, and it just so happens to use display: none when it's closed, so I saw it as a good opportunity to take a look at it. ...

1 Reply

cillian꧂OP•14mo ago

I solved it using css transitions instead:

#logo_image_2{
    position: fixed;
    width: 100px;
    left: 25px;
    top: 27.5px;
    z-index: 10;
    transition:opacity 1s;
}
.logo_invisible{
    opacity:0;
    pointer-events: none;
}
.logo_visible{
    opacity:1;
}

#logo_image_2{
    position: fixed;
    width: 100px;
    left: 25px;
    top: 27.5px;
    z-index: 10;
    transition:opacity 1s;
}
.logo_invisible{
    opacity:0;
    pointer-events: none;
}
.logo_visible{
    opacity:1;
}

Gaming

Programming

How can I disable image animations that run when a web page reloads?