Aujourd'hui on va faire un peu de pratique en JavaScript en reproduisant le menu situé à droite du site qui apparait avec un effet de "vague". Cet effet repose sur la juxtaposition d'une animation de translation horizontale avec une déformation de SVG.
Animation de SVG
Le coeur de l'effet repose donc sur l'animation des courbes de béziers qui compose une forme <path>. Il est possible d'animer ce chemin de différentes manières mais j'ai choisi d'utiliser ici dynamicsjs qui a l'avantage de ne proposer que le strict minimum (vous pouvez aussi utiliser snap.svg). Afin que cette transition se passe dans de bonnes conditions il est important de bien concevoir votre SVG en amont en respectant le nombre de points au départ et à l'arrivé de la transformation. Si une forme passe de 3 à 6 points la librairie aura tendance à interpoler ces nouveaux points de manière imprévisible.
<svg id="sidebar-wave" class="sidebar-wave" width="100%" height="100%" viewBox="0 0 200 900" version="1.1" preserveAspectRatio="none">
<path
d="M200,0c0,0 -200,46.405 -200,177c0,130.595 126.228,90.241 149,287c22.772,196.759 51,436 51,436l32,0l-4,-900l-28,0Z"
data-to="M0,0c0,0 0,46.405 0,177c0,130.595 1.152,98.101 0,296c-1.153,198.07 0,427 0,427l200,0l0,-900l-200,0Z"/>
</svg>Au niveau de l'HTML on ajoutera une propriété data-to afin de mémoriser les courbes que la forme devra avoir lors de la fin de l'animation. Ceci nous permet ensuite en JavaScript de stocker le point de départ et d'arrivé de l'animation.
let path = document.querySelector('#sidebar-wave path')
let from = path.getAttribute('d')
let to = path.getAttribute('data-to') // Firefox n'aime pas le dataset :(Enfin on peut utiliser la librairie choisie pour animer le SVG et le faire changer de forme au besoin
// Dans le cas de dynamicsjs
let options = {
type: dynamics.easeOut,
duration: 450,
friction: 450
}
dynamics.animate(path, {
d: to
}, options)
// Dans le cas de snap.svg
let s = Snap.select('#wave-path')
s.animate({
d: to
},450, mina.easeinout)Le reste de l'animation est plutôt simple et repose sur des transitions CSS qui se déclenchent par l'ajout d'une class has-sidebar sur l'élément <body>.
