SVG Linien animieren (wenn im Viewport)

Webflow Code-Vorlage mit Anleitung

Kostenloses Webflow Cloneable zum kopieren

Mit nur zwei Attributen kannst du jedes SVG mit Line Paths animieren und das Timing anpassen.

Diesen Trick und 43 weitere im Bundle kaufen

Für 49 € freischalten

Was ist enthalten?

Vorschau

Anleitung

Mit nur zwei Attributen kannst du jedes SVG mit Line Paths animieren und das Timing anpassen. Besonders einfach in Webflow über ein Embed Field zu integrieren. Wie erkläre ich dir im Video.

Path Commander: https://thednp.github.io/svg-path-commander/convert.html‍
SVG Compressor: https://jakearchibald.github.io/svgomg

Folgender JavaScript Code wird benötigt:

 
<script>
  $(document).ready(function() {
    $('[svg="animated"]').css({
      opacity: 0,
      transition: "opacity 400ms ease"
    });

    $(window).on("load resize scroll", function() {
      $('[svg="animated"] path').each(function() {
        var pathLength = this.getTotalLength();
        $(this).attr({
          "stroke-dasharray": pathLength,
          "stroke-dashoffset": pathLength
        });
        var svgAnimated = $(this).closest('[svg="animated"]');
        var svgAnimatedTop = svgAnimated.offset().top;
        var svgAnimatedHeight = svgAnimated.outerHeight();
        var windowHeight = $(window).height();
        var windowScrollTop = $(window).scrollTop();
        var animationDuration = svgAnimated.attr('svg-animation-time') || 5000;

        if (windowScrollTop + windowHeight > svgAnimatedTop && windowScrollTop < svgAnimatedTop + svgAnimatedHeight) {
          $(svgAnimated).css("opacity", 1);
          $(this).css({
            transition: "stroke-dashoffset " + animationDuration + "ms ease-out",
            "stroke-dashoffset": 0
          });
        }
      });
    });
  });
</script>

Folgende 2 Attribute musst du auf ein DIV um das SVG anwenden:

svg=”animated”

svg-animation-time=”zahl in ms” (optional)

Diesen Trick und 43 weitere im Bundle kaufen

Für 49 € freischalten

Was ist enthalten?

Weitere nützliche Webflow Tricks

Highlight

Freischalten

Autoplay Webflow Tabs

Passe Webflow Tabs mithilfe von Attributen so an, dass sie automatisch nach einer festgelegten Zeit zum nächsten Tab wechseln (mit animierter Tab-Bar).

Code-Vorlage

Text-Anleitung

Demo Beispiel

Video-Anleitung

Highlight

Freischalten

Overflow auto (horizontal scrollen) mit vor und zurück Button

Wenn du mit horizontal scrollbaren Sektionen arbeitest, solltest du vorwärts und rückwärts Button hinzufügen, die der User als Backup klicken kann, da nicht jede Maus horizontal scrollen kann.

Code-Vorlage

Text-Anleitung

Demo Beispiel

Video-Anleitung

Freischalten

Im Browser Hintergrund von Bildern entfernen und als PNG runterladen

Nutze ich häufig wenn es bei Kundenaufträgen mal schnell gehen muss. Funktioniert natürlich am besten bei Objekten, die einen neutraleren Hintergrund haben.

Tool

Text-Anleitung

Demo Beispiel

Video-Anleitung

Highlight

Freischalten

Einmalig ein Info-Banner (Notification Bar) auf der Website anzeigen

Sobald der Seitenbesucher den Info-Banner weggeklickt, wird er beim nächsten Laden der Website nicht mehr angezeigt, da die Entscheidung mit einem Cookie gespeichert wird. Über Attribute editierbar und ohne externe JS Library.

Code-Vorlage

Text-Anleitung

Demo Beispiel

Video-Anleitung

Freischalten

DSGVO konforme Alternative zu Webflow Forms

Mit einem Kostenlosen Plan von 250 Absendungen pro Monat, sehr einfacher Integration und du kannst weiterhin die Webflow Form-Komponente verwenden.

Tool

Text-Anleitung

Demo Beispiel

Video-Anleitung

Freischalten

Video Playback in einem Popup bei schließen stoppen

Dieser Code stoppt automatisch das weitere abspielen eines Videos in einem Popup / Modal Fenster, sobald dieses geschlossen wird.

Code-Vorlage

Text-Anleitung

Demo Beispiel

Video-Anleitung

Freischalten

Zahlen animiert hochzählen mit ease-out Effekt (wenn im Viewport)

Mit diesem JavaScript-Code kannst du Zahlen auf deiner Website animiert hochzählen lassen, und das mit einem sanften "ease-out" Effekt.

Code-Vorlage

Text-Anleitung

Demo Beispiel

Video-Anleitung

Freischalten

Webflow Lightbox Schließen-Button stylen

Dieser CSS Code überschreibt das Standard-Design von Webflow, welches jedem Lightbox-Schließen-Button mitgegeben wird. Du kannst es mit deinem eigenen Icon versehen.

Code-Vorlage

Text-Anleitung

Demo Beispiel

Video-Anleitung