Removing and adding a class through javascript smoothly

Question

I am trying to create this animation where the title is visible in the page initially then when you scroll down you trigger the title to slowly fade away and a subtitle fades in right after. I have the title part working but I can't seem to get the subtitle to appear with a smooth transition. At first I have my subtitle at "visibility:hidden" then when I scroll and the javascript adds the transition in class, it just abruptly comes in disregarding the transition property I gave it. Here is the fiddler I set up. Below is the javascript and css (respectively) i'm using to get this animation to work. Of course if there area any easier ways to achieve this feel free to let me know. Any advice or help will be GREATLY appreciated I have been researching and trying things to no avail.

Javascript

const element = document.getElementById('title');
const element2 = document.getElementById('subtitle');

window.onscroll = function() {

  console.log("document element");
  console.log(document.documentElement.scrollTop);
  console.log("scrolling elemnent");

  if (window.scrollY > 0) {
    element.classList.add('fadeout');
    element2.classList.add('fadein');
    console.log("hello");
  }
}

.fadeout {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

.two {
  visibility: hidden;
}

#subtitle {
  transition: opacity 2s linear;
}

.fadein {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}

Trobol · Accepted Answer · 2019-12-28 01:27:29Z

2

Currently your subtitle is at full opacity when you are fading it in (Because the visibility property does not set the opacity it just makes the element invisible)

Add opacity:0; to the .two CSS so that it will fade in.

Updated fiddle https://jsfiddle.net/s2cban6q (line 32 of CSS changed)

answered Dec 28, 2019 at 1:27

Trobol

1,26010 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dave Valles Over a year ago

Ahh makes sense! can't believe I missed that thank you so much!

Trobol Over a year ago

Glad I could help!

Dave Valles Over a year ago

Sorry to bother but real quick, why is it that I can't slap on the fade out class on the subtitle? like it fades in then lets say after 600px I want it to fade out so I add the fade out class to it but nothing happens?

Trobol Over a year ago

Currently .fadein will override .fadeout this is because in your CSS file the declaration of .fadein come BEFORE .fadeout. Which ever comes first will be overridden. You COULD swap the location in the file of the CSS but I would recommend instead removing the .fadein from the element when you want it to fade out.

Collectives™ on Stack Overflow

Removing and adding a class through javascript smoothly

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related