Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Fading in an element
<a href="#" id="tester">Test</a>
<div id="note-main">
<!-- <div id="note" class="note">
Hello, world
tester = document.getElementById('tester');
const setParent = function(el, newParent)
const afterNoteShown = function(e) {
const target = document.getElementById('note-main');
console.log('transition done');
e.currentTarget.classList.remove('slide-in'); = 'static';
setParent(e.currentTarget, target);
tester.addEventListener('click', e => {
const msg = `lookout momma, there's a white boat coming up the river`;
const html = `<div id="note2" class="note">${msg + msg}</div>`;
const container = document.getElementById('note-main');
container.insertAdjacentHTML('afterbegin', html);
const note = document.getElementById('note2');
note.addEventListener('transitionend', afterNoteShown);
}, 120);
// = '20px';
.note {
position: absolute;
top: 20px;
right: -800px;
max-width: 500px;
min-height: 25px;
padding: 1rem;
overflow: hidden;
background-color: rebeccapurple;
opacity: 1;
transition: right 2000ms ease-out;
.slide-in {
right: 20px;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.