jeangontijo

function toggleClass(element, oldClass, newClass) {
  let e = document.querySelector(element).classList;
  if(e.contains(oldClass)){
    e.replace(oldClass, newClass);
  }else{
    e.replace(newClass, oldClass);
  }
}

button.addEventListener('click', () => {

jeangontijo

function rand(min, max) {
   return Math.floor(Math.random() * (max - min + 1) + min);
}

jeangontijo

console.log(Math.ceil(document.querySelector("path").getTotalLength()));

jeangontijo

a {
  box-shadow: inset 0 -0.2em white, inset 0 -0.25em blue;
  text-decoration: none;
}

jeangontijo

:root * {
  /* Pause the animation */
  animation-play-state: paused;
  /* Bind the animation to scroll */
  animation-delay: calc(var(--scroll) * -1s);
  /* These last 2 properites clean up overshoot weirdness */
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

jeangontijo

var el = document.querySelector(".element");
var elX = el.getBoundingClientRect().x + el.offsetWidth / 2;
var elY = el.getBoundingClientRect().y + el.offsetHeight / 2;

function followMouse(e) {
  var moveX = e.clientX - elX;
  var moveY = e.clientY - elY;
  var radians = Math.atan2(moveY, moveX);
  var degrees = (radians * (180 / Math.PI));
  requestAnimationFrame(update.bind(update,moveX, moveY, degrees));

jeangontijo

function $(e){
    let el = document.querySelectorAll(e.toString());
    if (el.length > 1) {
        return el;
    } else {
        return document.querySelector(e.toString());
    }
}

$('#element').classList.add('active');

jeangontijo

body {
  position: fixed;
  overflow: hidden;
}

// That's it ! Tested in iOS 12

jeangontijo

<svg class="blob" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
    <path d="pathA" fill-rule="nonzero">
    <animate dur="5s" repeatCount="indefinite" attributeName="d" values="pathA;pathB;pathA" fill="freeze"
      calcMode="spline"
      keySplines="0.4 0 0.2 1; 0.4 0 0.2 1">
  </path>
</svg>

jeangontijo

.element {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
.fade {
    opacity: 0;
    transform: translate3d(0, 3rem, 0);
    transition-property: opacity, transform;
    transition-duration: 0.8s, 1.4s;
    transition-timing-function: linear, cubic-bezier(0.175, 0.885, 0.32, 1.275);