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

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

Freischalten

JavaScript Breakpoints für Webflow

Wenn du mit zusätzlichem Custom Code in Webflow arbeitest, soll dieser auch manchmal nur bei einem bestimmten Breakpoint ausgegeben werden. Dieser Code hilft dir dabei.

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

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

Automatisch nofollow zu externen Links in Webflow hinzufügen (Rich-Text, Blog etc)

Automatisiert 'rel=nofollow' Attribut bei allen Links in Richt-Text-Elementen hinzufügen. Spart Zeit und verbessert SEO.

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

Highlight

Freischalten

Webflow Slider bei einem bestimmten Slide starten lassen

Entscheide welcher Slide beim laden der Seite zuerst angezeigt werden soll. Einfach über Attributes editierbar.

Code-Vorlage

Text-Anleitung

Demo Beispiel

Video-Anleitung

Freischalten

Erstes FAQ Accordion standardmäßig geöffnet anzeigen

Zeige beim laden einer Seite das erste Element einer FAQ Liste standardmäßig geöffnet an.

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

Freischalten

Kleine Kreise und Rechtecke willkürlich auf der Website verteilen (Effekt)

Ein kreativer Effekt, der auch auf der Webflow Conf Website 2022 angewendet wurde. Die Elemente verschwinden automatisch on hover und tauchen wo anders wieder auf.

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

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

Alle Tricks anzeigen →