Skip to content

Instantly share code, notes, and snippets.

@IvanaSays
IvanaSays / PerformantAnimations5.css
Last active August 9, 2017 12:38
5 - Performant Animations
.box {
position: relative;
}
.box:before {
content: “”;
box-shadow: 1px 1px 1px rgb(0,0,0);
opacity: .5;
transition: .2s;
position: absolute;
width: 100%;
@IvanaSays
IvanaSays / PerformantAnimations6.css
Last active August 9, 2017 12:39
6 - Performant Animations
.box {
will-change: auto;
}
@IvanaSays
IvanaSays / PerformantAnimations7.css
Last active August 9, 2017 12:40
7 - Performant Animations
@keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
.box {
animation-name: spin;
animation-duration: 3ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@IvanaSays
IvanaSays / PerformantAnimations8.js
Last active August 9, 2017 12:40
8 - Performant Animations
var box = document.getElementById("box")
box.addEventListener("click", function(){
box.classList.toggle("class-name");
});
@IvanaSays
IvanaSays / PerformantAnimations9.js
Last active August 9, 2017 13:18
9 - Performant Animations
function doSomething() {
requestAnimationFrame(doSomething);
// Do stuff
}
doSomething();
@IvanaSays
IvanaSays / PerformantAnimations11.js
Last active August 9, 2017 13:21
10 - Performant Animations
boxes.forEach(box => {
box.style.transform = “translateY( + wrapper.getBoundingClientRect().height + “px);
})
@IvanaSays
IvanaSays / PerformantAnimations12.js
Last active August 9, 2017 13:24
12 - Performant Animations
var wrapperHeight = wrapper.getBoundingClientRect().height + 'px';
boxes.forEach(box => {
box.style.transform = “translateY( + wrapperHeight + “px);
})
@IvanaSays
IvanaSays / PerformantAnimations13.css
Last active August 9, 2017 13:21
12 - Performant Animations
.box {
contain: style; //will limit the scope of styles to this element and its children
}
element.addEventListener('touchmove', doSomething(), { passive: true });