Skip to content

Instantly share code, notes, and snippets.

View PerformantAnimations10.js
element.addEventListener('touchmove', doSomething(), { passive: true });
@IvanaSays
IvanaSays / PerformantAnimations13.css
Last active Aug 9, 2017
12 - Performant Animations
View PerformantAnimations13.css
.box {
contain: style; //will limit the scope of styles to this element and its children
}
@IvanaSays
IvanaSays / PerformantAnimations12.js
Last active Aug 9, 2017
12 - Performant Animations
View PerformantAnimations12.js
var wrapperHeight = wrapper.getBoundingClientRect().height + 'px';
boxes.forEach(box => {
box.style.transform = “translateY( + wrapperHeight + “px);
})
@IvanaSays
IvanaSays / PerformantAnimations11.js
Last active Aug 9, 2017
10 - Performant Animations
View PerformantAnimations11.js
boxes.forEach(box => {
box.style.transform = “translateY( + wrapper.getBoundingClientRect().height + “px);
})
@IvanaSays
IvanaSays / PerformantAnimations9.js
Last active Aug 9, 2017
9 - Performant Animations
View PerformantAnimations9.js
function doSomething() {
requestAnimationFrame(doSomething);
// Do stuff
}
doSomething();
@IvanaSays
IvanaSays / PerformantAnimations8.js
Last active Aug 9, 2017
8 - Performant Animations
View PerformantAnimations8.js
var box = document.getElementById("box")
box.addEventListener("click", function(){
box.classList.toggle("class-name");
});
@IvanaSays
IvanaSays / PerformantAnimations7.css
Last active Aug 9, 2017
7 - Performant Animations
View PerformantAnimations7.css
@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 / PerformantAnimations6.css
Last active Aug 9, 2017
6 - Performant Animations
View PerformantAnimations6.css
.box {
will-change: auto;
}
@IvanaSays
IvanaSays / PerformantAnimations5.css
Last active Aug 9, 2017
5 - Performant Animations
View PerformantAnimations5.css
.box {
position: relative;
}
.box:before {
content: “”;
box-shadow: 1px 1px 1px rgb(0,0,0);
opacity: .5;
transition: .2s;
position: absolute;
width: 100%;
View PerformantAnimations4.css
.box {
box-shadow: 1px 1px 1px rgba(0,0,0,.5);
transition: .2s;
}
.active {
box-shadow: 1px 1px 1px rgba(0,0,0,1);
}
You can’t perform that action at this time.