Die Entstehung der CSS-Tricks Logo Easter Egg Animation

Als Chris mit dem Redesign von CSS-Tricks begann, kam er mit einigen Screenshots der Richtung auf mich zu und schlug vor, dass ich eine Animation für das Logo als Teil der Design-Auffrischung erstelle. Ich war begeistert von diesem Projekt und mein Kopf begann sofort, mögliche Animationen und Interaktionen zu durchdenken.

Ich habe in letzter Zeit sehr viel mit der GreenSock Animation Platform und SVG gearbeitet. Wenn Sie sie nicht kennen, lohnt es sich, sie sich anzusehen. Sie ist sehr gut in performanten Animationen, komplexen Timelines und Cross-Browser-Stabilität bei Animationen, unter anderem.

Ungefähr zu dieser Zeit erwähnten Jack und Carl von GreenSock mir gegenüber, dass sie das MorphSVG Plugin entwickelten, das komplexe SVG-Formen morphen kann, selbst wenn die Anzahl der Pfadpunkte nicht übereinstimmt. Ich hatte das Gefühl, dass dieses Projekt ein guter Kandidat wäre, um diese neue (und ziemlich erstaunliche) Technologie zu erlernen. Ungefähr zu dieser Zeit veröffentlichte Val Head auch „Designing Safer Web Animation for Motion Sensitivity“ in A List Apart, das einen Schalter für UI-Animationen vorschlug, die viel Bewegung verursachen.

Erster Versuch

Ich war daran interessiert, das CSS-Tricks-Logo, den „Wildcard Selector“-Stern, mit etwas Morphing-Verhalten vom Type-Logo selbst zu integrieren. Das „K“ in Tricks, das fast selbst ein halber Stern ist, wurde zu einem guten Kandidaten für das Morphing-Ziel dieser Form.

Eines der coolsten Dinge, die GreenSock mit der MorphPlugin-Veröffentlichung gemacht hat, ist ein Helfer-Plugin namens findShapeIndex. Dieses Plugin hilft Ihnen, den besten Morph-Typ für Ihre Animation auszuwählen, indem es Ihnen ermöglicht, durch die Tweening-Punkte zu blättern, wenn Sie bei der Art und Weise, wie die Form morpht, besonders sein wollen. Der Standard ist auto, der die meiste Zeit funktioniert. Aber wenn Sie etwas mehr Kontrolle wünschen, ist es ein riesiger Gewinn, dieses Plugin verwenden zu können, um alle möglichen Variationen für diese Tweens zu sehen. Sie laden es hoch, zeigen von einer ID auf eine andere: findShapeIndex("#hex", "#star");, und eine nette GUI erscheint.

Siehe den Pen findShapeIndex von Sarah Drasner (@sdras) auf CodePen.

Als ich das hier zum ersten Mal erstellt habe, gab es dieses Plugin jedoch noch nicht. Um den „Zwischenzustand“ des „K“ und des Sterns wirklich kontrollieren zu können, fand ich heraus, dass ich es am besten aussehen lassen konnte, wenn ich einen halben Stern entwarf, der die beiden Zustände vereinte.

Wenn ich andere ermutige, sich an der Animation zu versuchen, finde ich es wichtig zu betonen, dass meine Animationsprojekte nicht über Nacht entstehen und ich normalerweise nicht nur eine Iteration davon erstelle, um zum fertigen Stück zu gelangen. Dieses Projekt war keine Ausnahme. Meine erste Iteration war viel reduzierter (drücken Sie die Wiedergabetaste, um die Animation zu sehen).

Siehe den Pen CSS-Tricks Logo First Attempt von Sarah Drasner (@sdras) auf CodePen.

Ich hatte den Stern und das „K“ morphing, aber ursprünglich gedacht, den Stern in ein paar Punkte zu morphen, die mit Bewegung entlang eines Pfades mit dem Bezier Plugin, eingebaut in TweenMax, rotierten. Der Stern kreist durch die Verwendung einer sehr einfachen Anordnung von Pfadpunkten.

bezier = [
  { x: 0, y: 0 }, 
  { x: 0, y: 20 }, 
  { x: 20, y: 20 }, 
  { x: 20, y: 0 }, 
  { x: 0, y: 0 }
];

Wenn ich dann die curviness auf 2 setze, erhalte ich einen vollen Kreis. Die unten stehende Demo zeigt, dass Sie durch Erhöhung der Krümmung den Punkt überschreiten können, an dem eine einfache Kurve entsteht, und dass 2 optimal für die Rundung zwischen vier Punkten ist.

tl.staggerTo(dS, 0.1, { bezier: {
    type: 'thru',
    values: bezier,
    curviness: 2
  }, opacity: 0, 
     ease: Linear.easeInOut }, 0.06);

Siehe den Pen Demo für Krümmung in GreenSock Bezier von Sarah Drasner (@sdras) auf CodePen.

Weitere Lektüre darüber, wie Bewegung entlang eines Pfades in GreenSock funktioniert, finden Sie in diesem David Walsh Blog-Artikel.

Anstatt das „K“ einfach wieder erscheinen zu lassen, dachte ich, es wäre ein schöner Einstieg, es mit seinem eigenen Strich wieder auf den Bildschirm zu zeichnen.

drawSVG: '50% 50%' lässt den gesamten Strich so aussehen, als ob er noch nicht existiert, da beide Seiten des Strichs vollständig kollabiert sind. Ich kann dann die Füllung von none kurz danach auf Schwarz setzen.

tl.fromTo(k2, 0.8, {
   drawSVG: '50% 50%'
 }, {
   drawSVG: true,
   ease: Power4.easeOut
 }, "begin+=1");
 tl.fromTo(k2, 1, {
   fill: "none"
 }, {
   fill: "black",
   ease: Power4.easeOut
 }, "begin+=1.6");

Aber nach all dem war ich mit dem Ergebnis ein wenig unzufrieden. Es funktionierte, aber es fehlte etwas... Energie und... Pfiff? Ich bat Chris um etwas Kunstanleitung, und er schlug vor, dass die Zeichen sich in „CSS-TRIK*Z“ und wieder zurück morphen.

Weitere Design-Verfeinerungen

Aufbauend auf dem, was ich im ursprünglichen Versuch gelernt hatte, entschied ich, dass mir der „K“ und der Stern sehr gut gefielen. Dann beschloss ich, das noch einen Schritt weiter zu gehen, mit vielen Zeichen in Bewegung. Die „C“, „K“ und „S“ am Ende mussten sich eindeutig bewegen, um zu anderen Zeichen zu werden. Ausgehend vom Stern begann ich zu skizzieren.

Ich stelle fest, dass hässliche Storyboards mir viel Zeit sparen. Es dauert 15 Sekunden, diese visuellen Notizen für mich selbst zu kritzeln, und dann, wenn ich zu Illustrator gehe, um meine Ideen auszuarbeiten, habe ich einen Fahrplan. Eines der grundlegendsten Dinge, die ich beim Design für Animation gelernt habe, ist, dass es sehr sinnvoll ist, alles zu entwerfen und dann die Elemente langsam zu enthüllen.

Durch die Arbeit innerhalb eines Tech-Themas war es ziemlich einfach, Korrelationen in den Buchstabenformen mit Möglichkeiten für ihre morphenden Gegenstücke zu erkennen. Ich habe icomoon.io erkundet und ein Link-Symbol gesehen, das wie ein „S“ aussah, wenn ich es nur gedreht habe, und das GitHub-Gabel-Symbol, das einem „T“ ähnelt, und alles, was ich tun musste, als ich sie in die Illustrator-Datei einfügte, war, die Pfaddaten anzupassen, um die Breiten und Höhen der Schriftzüge im Logo zu übereinstimmen.

Um den Stern zu ergänzen, wollte ich etwas Planet-ähnliches. Ich überlegte, dass die Ringe von Saturn dann zur CSS-Klammer werden könnten, die auch das Potenzial hatte, wie ein „K“ auszusehen. Das „S“ und das „Z“ waren ein ziemlich geradliniges Flipping-Morph, aber als ich das „Z“ wirklich betrachtete, hatte es das Potenzial, wie Code-Klammern auszusehen: </>. Ursprünglich hatte ich ein Tippen eines Tags zwischen den Klammern, aber das verlangsamte die gesamte Animation, um diese Bewegung zu ermöglichen, und war ein wenig zu beschäftigt, also habe ich es herausgeschnitten. Wieder einmal durchlaufen alle meine Animationen viele Iterationsstadien, und manchmal verbringe ich eine Weile damit, etwas zu erstellen und zu codieren, das es nicht in die Endauswahl schafft. Hey, das ist Showbusiness.

Während meiner Arbeit in Illustrator habe ich darauf geachtet, alle Teile, mit denen ich arbeite, richtig zu benennen, damit ich mich im Code zurechtfinde.

Das ursprüngliche Logo wurde in Outlines konvertiert, aber wenn es das nicht gewesen wäre, müsste ich es konvertieren, um mit den Pfaddaten für jeden Buchstaben zu arbeiten. Sie stellen möglicherweise fest, dass etwas wie ein Logo ein zusammengesetzter Pfad ist, der schwer zu manipulieren ist. In diesem Fall können Sie eine einfache Linie dazwischen durch die Buchstaben ziehen, das Pathfinder-Fenster öffnen und „Teilen“ wählen. Dies sollte die Pfade für Sie aufteilen, damit Sie sie einzeln verwenden können.

Beim Exportieren des vollständigen SVG optimiere ich meinen Code, damit er nicht aufgebläht ist und leicht zu lesen ist. Ich benutze normalerweise Jake Archibalds SVGOMG, das aus dem sehr mächtigen terminalbasierten SVGO erstellt wurde, aber mit einer wunderbaren und hilfreichen GUI, damit Sie sehen können, was Sie exportieren. Da ich all diese Zeit damit verbracht habe, jeden Pfad zu benennen und ihn in verständliche Gruppen zu platzieren, stelle ich sicher, dass „IDs bereinigen“ und „nutzlose Gruppen reduzieren“ deaktiviert sind, sonst würde ich die Identifizierung dieser Pfadattribute alle entfernen.

Entwicklung der finalen Animation

Das Morphen selbst ist dank des Plugins von GreenSock unglaublich einfach. Sie können von einer ID auf eine andere zeigen und es erledigt die Schwerstarbeit für Sie.

tl.to(k, 0.2, {
    morphSVG: {
      shape: hstar
    },
    ease: Linear.easeNone
  });

Während ich daran arbeitete, war es sehr sinnvoll, ein relatives Label in der Timeline zu verwenden.

tl.add("begin");

So kann ich sicherstellen, dass alle Animationen am selben Punkt in der Timeline beginnen. Es bedeutet auch, dass ich ungefähr verfolgen kann, wann sie alle ihre Reise beenden sollten. In diesem Fall können Sie sehen, dass alles ungefähr bei 2,5 Sekunden endet oder "begin+=2.5".

Ich habe die gesamte Animation in der Timeline absichtlich viel langsamer eingestellt, während ich arbeite, damit ich jede einzelne Bewegung wirklich analysieren kann – das ist mit einer Codezeile einfach zu machen.

tl.timeScale(0.4);

Dann, wenn ich alle Bewegungen perfektioniert habe, kann ich dies anpassen, bis ich eine Zeitleiste habe, die meiner Meinung nach gut für die Bewegung funktioniert, in diesem Fall

tl.timeScale(1.2);

Ich benutze lineare Easing-Funktionen in meinen Animationen normalerweise nicht so oft, aber Morphen sieht mit einem sanften linearen Easing wirklich gut aus. Um die verschiedenen Arten von verfügbaren Easing-Funktionen zu visualisieren, schauen Sie sich dieses großartige Ease Visualizer Tool an. Ich verwende „back“-artige Easing-Funktionen hier sparsam, um das lineare Easing zu akzentuieren und auf Momente aufmerksam zu machen, denen ich Vorrang einräumen und sie auf etwas übertriebene Weise hervorheben möchte – in diesem Fall das Morphen des Saturnrings oder das finale Stern-Morphen. (Klicken Sie auf den orangefarbenen Schalter in der Strichlinie, um die Animation zu aktivieren. Möglicherweise müssen Sie zuerst auf „Wiederholen“ klicken.)

Siehe den Pen Animiertes CSS-Tricks Logo von Sarah Drasner (@sdras) auf CodePen.

Eines, das für das Gelingen unerlässlich ist, ist sicherzustellen, dass die Dinge, die ich anfangs verstecke, nicht sichtbar sind, nicht einmal kurzzeitig, bis ich bereit bin, dass der Benutzer sie sieht. Daher setze ich alle Pfadattribute, die schließlich angezeigt werden sollen, in CSS auf visibility: hidden; und setze sie dann in JavaScript mit TweenMax.set wieder auf sichtbar. Dies stellt sicher, dass sie verborgen bleiben, bis JavaScript geladen ist und ich die Elemente mit der Animationslogik ausblenden kann.

Ich speichere jede ID, die ich in der Animation mehr als einmal verwende, als Variable, um mehrfache Suchen zu vermeiden. Ich kann auch die Pfaddaten eines Buchstabens speichern, wenn ich sie im Laufe der Animation mehrmals verwenden muss, z. B. wenn ich etwas mehr als einmal in die gleiche Form tweenen muss.

var tPath = t[0].getAttribute("d");

Das wirklich Coole an der Verwendung der GSAP-Timeline ist, dass ich die Timeline anhalten kann, um die gesamte Animation bei einer Klickinteraktion vorwärts und rückwärts abzuspielen, dann die Timeline für die erste Iteration abspielen und für die alternative umkehren kann.

$(dotActive).on("click", function() {
  if ($(this).hasClass("active")) {
    $(this).removeClass("active");
    master.reverse();
  } else {
    $(this).addClass("active");
    master.play();
  }
});

Das ist jQuery mit jQuery 3.0, der ersten Version von jQuery, die SVG-Klassenoperationen unterstützt. Ich habe auch ein separates Tween für den Hover, um den Betrachter auf die Tatsache aufmerksam zu machen, dass der Schalter als Auslöser fungiert, mit einer Funktion namens bloop für den sich wiederholenden Kreis, der herausspringt, sowie mit einer Skalierung, die bei mouseenter funktioniert.

function bloop() {
  var tl = new TimelineMax();
  tl.fromTo(dotExpand, 0.75, {
    scale: 1,
    opacity: 1
  }, {
    scale: 5,
    transformOrigin: "50% 50%",
    opacity: 0,
    repeat: 3,
    ease: Sine.easeOut
  });
  return tl;
}

var hoverOn = new TimelineMax({
    paused: true
  }),
  dash = $("#dash");
hoverOn.add(bloop());

$(dotActive).on("mouseenter", function() {
  dotExpand.removeClass("hide");
  TweenMax.to(dash, 0.3, {
    scale: 1.3,
    transformOrigin: "50% 50%",
    ease: Sine.easeOut
  });
  TweenMax.to(dotActive, 0.3, {
    scale: 1.3,
    transformOrigin: "50% 50%",
    ease: Sine.easeOut
  });
  hoverOn.restart();
});

Der Punkt musste sich zwischen dem Schalter hin und her bewegen, aber das Vorwärts- und Rückwärtsspielen der Timelines eignete sich gut für diese Art von Verhalten. Ich habe einfach den Punkt, der sich über die Timeline bewegt, in die Master-Timeline eingefügt, sodass er beim Rückwärtsspielen für den zweiten Zustand seine Schritte über die Strichlinie zurückverfolgt und anzeigt, wo wir uns im Zustand der Animation befanden.

Und da haben wir es! Eine schöne „Easter Egg“-Logo-Morph-Animation.