Generative Design [3]

2018 - 2019

Drawing animation

SVG Line Animation

<svg>
  <path stroke-dasharray="20" d="M374.54 14.43a.91.91 0 0 0 0 1-.8.48z"/>
</svg>
<svg>
  <path stroke-dasharray="100" d="M374.54 14.43a.91.91 0 0 0 0 1-.8.48z"/>
</svg>
<svg>
  <path stroke-dasharray="100" d="M374.54 14.43a.91.91 0 0 0 0 1-.8.48z"/>
</svg>
path {
  animation: dash 5s linear;
}

@keyframes dash {
  to {
    stroke-dashoffset: 1000;
  }
}
<svg>
  <path stroke-dasharray="100" d="M374.54 14.43a.91.91 0 0 0 0 1-.8.48z"/>
</svg>
path {
  animation: dash 5s linear infinite;
  stroke-dasharray: 1000;
}

@keyframes dash {
  to {
    stroke-dashoffset: 1000;
  }
}
var length = document.querySelector('path').getTotalLength();

GreenSock

Exercice 1

Exercice 2

Animate along a path

1. Créer un tracé

2. Exporter le tracé

⚠️Cocher 'Use Artboards' ⚠️

3. Coller le tracé dans son HTML et le cacher en CSS

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 270 270">
    <path d="M74.27,0C33.39,0,0,33.38,0,74.26c0,14.09,6.22,28.21,15.04,43.89c31.15,53.11,73.87,98.5,110.85,147.18c4.67,6.19,13.95,6.23,18.68,0.09c38.92-52.23,80.22-93.44,110.41-147.05c8.82-15.81,15.04-30,15.04-44.11 C270,33.39,236.61,0,195.73,0c-26.81,0.05-47.7,16.8760.75,39.12C121.92,16.89,101.07,0.04,74.27,0L74.27,0z"/>
</svg>
svg {
  display: none;
}

4. Positionner l'élément à animer en absolu par rapport à son parent

<div>
  <span>💙</span>
</div>
div {
  width: 80vmin;
  height: 80vmin;
  position: relative;
}
span {
  position: absolute;
  top: 0px;
  left: 0px;
  font-size: 10vmin;
}

5. Sélectionner le tracé en JavaScript et récupérer sa longueur

var path = document.querySelector('path');
var length = path.getTotalLength();

6. Sélectionner l'élément à animer ainsi que les dimensions de son parent

var span = document.querySelector('span');
var width = document.querySelector('div').offsetWidth;
var height = document.querySelector('div').offsetHeight;

7. Animer une variable de 0 à 1 qui correspond à la progression de l'animation le long du tracé 

var tween = { progress: 0 };

TweenMax.to(tween, 8, {
  progress: 1,
  repeat: -1,
  ease: Power0.easeNone
});

8. À chaque frame, récupérer un point le long du tracé sur base de la progression

TweenMax.to(tween, 8, {
  progress: 1,
  repeat: -1,
  ease: Power0.easeNone,
  onUpdate: () => {
    var point = path.getPointAtLength(tween.progress * length);
  }
});

9. Convertir les coordonnées du point sur base du viewBox vers les dimensions du parent

onUpdate: () => {
    var point = path.getPointAtLength(tween.progress * length);
    // x / (largeur viewBox) * (largeur parent)
    var x = point.x / 270 * width;
    // y / (hauteur viewBox) * (hauteur parent)
    var y = point.y / 270 * height;
}

10. Appliquer les nouvelles valeurs de x & y sur notre élément

onUpdate: () => {
    var point = path.getPointAtLength(tween.progress * length);
    // x / (largeur viewBox) * (largeur parent)
    var x = point.x / 270 * width;
    // y / (hauteur viewBox) * (hauteur parent)
    var y = point.y / 270 * height;
    
    TweenMax.set(span, {
      x: x,
      y: y
    });
}

3 - Generative Design [2018-2019]

By Louis Hoebregts

3 - Generative Design [2018-2019]

  • 40
Loading comments...

More from Louis Hoebregts