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

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

Kostenlos

Freischalten

Horizontal Sektion scrolling Parallax Bilder Effekt (Webflow Interactions)

Ein Effekt, welcher eine Sektion horizontal über den Screen scrollt und gleichzeitig Bilder hinter einem Fenster parallax bewegt. Ohne Custom Code!

Cloneable

Text-Anleitung

Demo Beispiel

Video-Anleitung

Kostenlos

Freischalten

Code-Vorlage

Text-Anleitung

Demo Beispiel

Video-Anleitung

Freischalten

Tabellen für Rich-Text Inhalte visuell erstellen

Webflow bietet keine Tabellen-Funktion in Rich Text Elementen. Mit diesem Tool kannst du Tabellen und Inhalte visuell gestalten und den Code als Embed einfügen.

Tool

Text-Anleitung

Demo Beispiel

Video-Anleitung

Freischalten

CMS Rich-Text Bullet Liste mit eigenem Icon (spart dir CMS fields)

Ersetze die Standard CSM Rich-Text-Bullet-Liste in Webflow mit eigenen SVG-Icons, die sich automatisch skalieren. Perfekt für individuell gestaltete Aufzählungen.

Code-Vorlage

Text-Anleitung

Demo Beispiel

Video-Anleitung

Highlight

Freischalten

Scrollen der Seite verhindern wenn eine Webflow Navigation geöffnet ist

Dieser einfache Code, stoppt das Scrollen des Hintergrunds, wenn das Webflow mobile Menü geöffnet ist. Funktioniert auch auf Desktop.

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

Kostenlos

Freischalten

Tabs in Tabs, die auf Mobile zu Dropdown werden

Eine individuell gestaltete Tabs-in-Tabs-Komponente, die sich auf dem Mobile Breakpoint in eine Dropdown-Komponente verwandelt.

Cloneable

Text-Anleitung

Demo Beispiel

Video-Anleitung

Kostenlos

Freischalten

Schnell elegante Mockups aus Screenshots erstellen (kostenlos)

Einfach bild reinziehen und zwischen Screenshot-Modus, perfekten Browser-Mockups oder Geräten wie iPhone, Tablet und MacBook wählen.

Tool

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

Auf ein FAQ Element von einer anderen Seite verlinken und es geöffnet anzeigen

Verlinke auf ein bestimmtes FAQ-Element von einer anderen Seite aus zu verlinken und es gleichzeitig geöffnet anzuzeigen. Einfach ?faq=3 mit an die URL hängen.

Code-Vorlage

Text-Anleitung

Demo Beispiel

Video-Anleitung

Alle Tricks anzeigen →