Webflow X GSAP Meetup Recap + Community Cloneable

Darum ging es bei dem digitalen Meetup

In der deutschen wie auch internationalen Webflow Community trifft man sich regelmäßig zu digitalen Meetups - um voneinander zu lernen, sich auszutauschen und zu vernetzen. Nicht selten sind solche Meetups einem Thema gewidmet, welches in den meisten Fällen von dem / die Intiator:in vorgestellt wird, um das Interesse zur Teilnahme an solch einem "Event" zu wecken. Nachdem sich insbesondere die deutschsprachigen Webflow-Entwickler:innen zunehmend auch mit Möglichkeiten außerhalb des No-Code bzw. Low-Code Spaces auseinandersetzen, haben wir die Initiative ergriffen und mit dem Titel "Webflow X GSAP" zu einem Meetup eingeladen. Bei diesem Meetup stand Dennis als Experte der Community zur Verfügung.

Dennis ist in dem Meetup auf folgende Punkte näher eingegangen: 

Was ist GSAP?

Die Greensock Animation Plattform (kurz: GSAP) ist die weltweit leistungsfähigste und performanteste JavaScript Bibliothek für das Animieren von HTML, SVG und Canvas Elementen. Unternehmen wie z.B. Google, Uber, Coca Cola, Intel, Microsoft, Amazon sowie unzählige der erfolgreichsten Digital Agenturen setzen die Bibliothek in ihren Websites und Projekten ein, weshalb GSAP sich über Jahrzehnte hinweg als valides Tool für die Umsetzung von User Interactions auf Enterprise Level bewiesen hat. Bei Awwwards allein, der Plattform auf der täglich die besten Websites der Welt ausgezeichnet werden, gibt es eine eigene Kategorie für GSAP Animationen, in der heute über 2.700 Websites gelistet sind.

Clonable für die Community zum Festigen der Inhalte

Die GSAP Bibliothek ist aus dem Blickwinkel von Webflow-Entwickler:innen ein Full-Code Tool, weswegen ein Einstieg in dieses, insbesondere da es auf JavaScript basiert, mit einer enormen Hürde versehen ist. In meiner Präsentation während des Meetups habe ich den Teilnehmer:innen die wichtigsten Herangehensweisen für den Start mit Tweens und Timelines des GSAP Cores sowie der Plugins ScrollTrigger, SplitText & Draggable vermittelt. In den Bereichen der digitalen Entwicklung reicht es allerdings in den meisten Fällen nicht aus, dass das, was man vermittelt bekommen hat, auch direkt produktiv einsetzen kann. Aus diesem Grund haben wir zusammen mit diesem Beitrag ein kostenfreies Cloneable für die Teilnehmer:innen des Meetups veröffentlicht, in dem wir die wesentlichen Inhalte der Präsentation zum Festigen der vermittelten Inhalte eingebaut haben. Zusätzlich findest du in dem diesem Projekt einige Empfehlungen für tiefergehende Quellen sowie Personen, die regelmäßig GSAP Resources entwickeln und teilen, welchen du auf ihren jeweiligen Plattformen für eigene Inspirationen folgen kannst.

Das Cloneable "Webflow X GSAP - Meetup Cloneable" findest du ab sofort im Made in Webflow Showcase.

Selbstverständlich kannst du dieses Webflow Cloneable nutzen, selbst wenn du nicht am Meetup teilgenommen hast.

Unsere Learnings bei der Organisation eines digitalen Meetups

Es war das erste Mal, dass wir ein Meetup unter eigener Flagge mit dem Ziel umgesetzt haben, Webflow-Entwickler:innen ein vermeintlich sehr komplexes Thema möglichst einfach und praxisorientiert näherzubringen. Wir mussten daher auch abseits der Entwicklung der Präsentation einiges beachten und lernen. Die Learnings möchten wir gerne mit euch teilen:

1. Es ist wichtig, bereits bei der Bewerbung eines Meetups klarzustellen, was in diesem passiert. Ist ein Workshop, ein Vortrag oder doch ein Peer2Peer? Bei dieser Aussage geht es um die Erwartungshaltung der potenziellen Teilnehmer:innen, welche beim Lesen der Beschreibung des Meetups entsteht. Es ist wichtig, dass diese erfüllt wird, damit Teilnehmende auch bei zukünftigen Meetups eine Teilnahme in Erwägung ziehen.
2. Je nach Art des Meetups sollten ggf. Voraussetzungen kommuniziert werden, welche die Teilnehmenden erfüllen sollten. Dabei ist auch die Zielgruppe des Meetups ein wesentlich zu beachtender Faktor. In meinem Meetup zum Beispiel wäre es von enormen Vorteil, wenn ein gewisses Maß an JavaScript Kenntnisse bei den Teilnehmenden vorhanden ist, da GSAP eben kein No-Code oder Low-Code Tool ist.
3. Der Vortrag oder Präsentation sollte vorher einmal durchgespielt werden, um eventuelle inhaltliche Defizite frühzeitig ausgleichen zu können und um die benötigte Zeit besser einschätzen zu können.
4. Wenn du früher oder später ein digitales Meetup über Discord planst durchzuführen, empfehlen wir die Verwendung von OBS (Open Broadcast Software) sowie die virtuelle Kamera von OBS zum gleichzeitigen Teilen des Bildschirms und einer Kamera.

Nächstes "Webflow X GSAP" Meetup in Planung

Aufgrund der positiven Resonanz der Teilnehmer:innen zu der Einführung in GSAP planen wir bereits das nächste Meetup dieser Art zu diesem Thema. Das nächste Meetup wird voraussichtlich im September erneut auf dem Discord Server der deutschsprachigen Webflow Designer:innen stattfinden. Wenn du den Termin nicht verpassen möchtest, laden wir dich herzlich ein, dem Discord Server beizutreten oder/uns mir (Dennis Karg) auf Twitter zu folgen. Wenn du Teilnehmer:in des ersten "Webflow X GSAP" Meetup warst und erneut teilnehmen möchtest, teile uns gerne Wünsche und Anmerkungen mit, die wiir für die nächste Vorstellung beachten sollen. Ansonsten ist selbstverständlich jeder herzlich willkommen, der/die die eigenen Fähigkeiten erweitern möchte.