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

Kostenlos

Freischalten

Vimeo Video Playlist mit Webflow CMS erstellen

Erstelle ansprechende Vimeo Videoplaylists mithilfe dieses Webflow Cloneables. Nutzt die Vimeo API. Ideal für Tutorials und Kurse.

Cloneable

Text-Anleitung

Demo Beispiel

Video-Anleitung

Freischalten

Webflow Website Launch Checkliste

Meine umfassende Checkliste aus meinem Webflow-Onlinekurs hilft dir bei einem reibungslosen Website-Launch um keine wichtigen Schritte zu übersehen.

Allgemein

Text-Anleitung

Demo Beispiel

Video-Anleitung

Freischalten

Horizontales Text / Bilder Karussell (ohne Webflow Interaktionen) | Infinite Marquee

Lass Bilder, Logos und Texte mit nur zwei Zeilen CSS Code horizontal durch den Bildschirm wandern. Mit dieser Code-Vorlage musst du nur ein Attribut vergeben.

Code-Vorlage

Text-Anleitung

Demo Beispiel

Video-Anleitung

Freischalten

Webflow Lightbox Hack: Gruppen-Slugs per JavaScript steuern

Ein Trick, der dir zeigt, wie du in Webflow mehrere unabhängige Lightbox-Galerien mit dynamischen CMS-Gruppennamen erstellst, ohne dass sie sich in einer Gruppe öffnen.

Code-Vorlage

Text-Anleitung

Demo Beispiel

Video-Anleitung

Freischalten

Webflow SEO Checkliste (mehrere zusammengefasst)

Ich habe dir einige wichtige Punkte von verschiedenen SEO Beiträgen in diesem Beitrag zusammengefasst.

Allgemein

Text-Anleitung

Demo Beispiel

Video-Anleitung

Freischalten

SVG Code Zeichenlimit für Embed Felder in Webflow umgehen

Umgehe das 10.000 Zeichen Limit für Webflow Embed Fields und füge große SVG Bilder als Code zu deiner Website hinzu.

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

Freischalten

Mehrere 303 Redirects in Webflow auf einmal anlegen (CSV Upload)

Mehrere 303 Redirects in Webflow auf einmal via CSV Upload hochladen.

Tool

Text-Anleitung

Demo Beispiel

Video-Anleitung

Highlight

Freischalten

Position Sticky innerhalb von overflow auto / hidden

Ein Accordeon mit einer großen Tabelle verwendet "overflow: hidden", während die Tabelle selbst "overflow: auto" nutzt, um sowohl horizontal als auch vertikal gescrollt werden zu können. Eigentlich funktioniert "position: sticky" innerhalb dieser Tabelle nicht mehr, mit dieser Code-Vorlage allerdings schon.

Code-Vorlage

Text-Anleitung

Demo Beispiel

Video-Anleitung

Highlight

Freischalten

Lazy Loading Background Videos in Webflow

Viele Background Videos auf einer Website führen zu einer hohen Netzwerknutzlast und schlechteren Page-Speed Score. Dieser Code hilft dir dabei, Videos erst zu laden, sobald sie im Viewport des Seitenbesuchers sind.

Code-Vorlage

Text-Anleitung

Demo Beispiel

Video-Anleitung