109.192.169.230 am 11. Mai 2021 um 10:46 Uhr

2021-05-11T10:46:50Z

37.49.72.8 am 7. August 2020 um 11:32 Uhr

2020-08-07T11:32:19Z

37.49.72.8: Die Seite wurde neu angelegt: „Plugin zum Steuern von Events und Animationen abhängig von der Scrollposition. Kombiniert mit GSAP Animationen sehr mächtig. == Links == https://scrollmagi…“

2020-03-20T21:05:33Z

Die Seite wurde neu angelegt: „Plugin zum Steuern von Events und Animationen abhängig von der Scrollposition. Kombiniert mit GSAP Animationen sehr mächtig. == Links == https://scrollmagi…“

Neue Seite

Plugin zum Steuern von Events und Animationen abhängig von der Scrollposition. Kombiniert mit GSAP Animationen sehr mächtig.

== Links ==
https://scrollmagic.io
https://scrollmagic.io/docs/

← Nächstältere Version		Version vom 7. August 2020, 11:32 Uhr
Zeile 4:		Zeile 4:
	https://scrollmagic.io		https://scrollmagic.io
	https://scrollmagic.io/docs/		https://scrollmagic.io/docs/
		+
		+	== ScrollMagic und GSAP ==
		+	Timeline Controlling mit ScrollMagic
		+	=== ScrollMagic mit GSAP Basics ===
		+	# GSAP Timeline Animation erstellen
		+	# MagicScroll Controller erstellen.
		+	# MagicScroll Szene definieren und GSAP-Timeline an den MagicScroll Tween übergeben (dafür ist das animation.gsap Plugin von MagicScroll notwendig)
		+	==== ScrollMagic Basisbeispiele ====
		+	var controller = new ScrollMagic.Controller();
		+	Szenen definieren wie und an welcher Stelle der Controller reagieren soll. Der Szene übergibt man Eigenschaften
		+
		+	var scene = new ScrollMagic.Scene();
		+	var scene = new ScrollMagic.Scene({
		+	offset: 100, // start scene after scrolling for 100px
		+	duration: 400 // pin the element for 400px of scrolling
		+	})
		+
		+	Dann übergibst du die Szene an den Controller. Auch mehrere Szenen (mit Komma getrennt) sind möglich.
		+
		+	controller.addScene(scene);
		+	Alternativ kannst du die Szene direkt aus dem Scene Objekt mit der addTo() Funktion zum Controller hinzufügen
		+
		+	<syntaxhighlight lang="javascript">
		+	var scene = new ScrollMagic.Scene({
		+	triggerElement: '#trigger1'
		+	})
		+	.addTo(controller); // Add Scene to ScrollMagic Controller
		+
		+	var scene2 = new ScrollMagic.Scene({
		+	triggerElement: '#trigger2'
		+	})
		+	.addTo(controller); // Add Scene to ScrollMagic Controller
		+	</syntaxhighlight>
		+
		+	==== Trigger Animation ====
		+	Im ersten Fall wird die Animation an einer bestimmten '''Scroll Position ausgelöst'''. '''Die Animation selbst läuft nach dem Start automatisch ab.''' Folgendermaßen definieren wir die Szene.
		+	<syntaxhighlight lang="javascript">
		+	// Create a new ScrollMagic Scene
		+	var scene = new ScrollMagic.Scene({
		+	triggerElement: "#trigger1",
		+	duration: 0, // 0 because duration is handled by gsap
		+	triggerHook: 0.5, // 0.5 -> trigger position at middle of browser window
		+	offset: 0
		+	})
		+	</syntaxhighlight>
		+	In der ScrollMagic Scene ist die '''Dauer auf 0 gesetzt'''. Das bedeutet die Dauer wird von der GSAP Timeline bestimmt.
		+
		+	==== Animation by Scroll ====
		+	Im zweiten Beispiel soll die Timeline '''über die Scrollposition gesteuert''' werden. Das geht ganz einfach indem wir in der ScrollMagic Szene eine '''Scrolldauer''' übergeben. Scrolldauer bedeutet ein '''Zahlenwert der als Pixel interpretiert wird'''. Oder ein '''Prozentwert (als String) der für "Prozent der Viewport-Höhe steht'''.
		+
		+	duration: "25%", // 50% means scrolling half window. Number i.e. 300 means while scrolling 300 pixel
		+
		+	==== Pinned Animation ====
		+	ScrollMagic liefert mit der setPin() Funktion eine einfache Möglichkeit ein Element auf dem Screen zu fixieren, solange die Animation läuft. In diesem Beispiel wurde einfach die Zeile
		+
		+	.setPin("#animation2 .animation") // pin this element
		+	hinzugefügt.
		+
		+	'''Pinned = Expanded Content'''
		+
		+	Beachte, dass die Section dieser Animation höher ist, als die der vorigen, obwohl es die gleiche Animation ist. Das liegt daran, dass '''die angepinnte Animation sich Platz verschafft''', indem sie den nachfolgenden Inhalt nach unten verschiebt.
		+
		+	Wenn du das nicht möchtest kannst du der setPin() Funktion die Eigenschaft pushFollowers: false mitgeben.
		+
		+	scene.setPin("#pin", {pushFollowers: false});

@@ Zeile 1: / Zeile 1: @@
 Plugin zum Steuern von Events und Animationen abhängig von der Scrollposition. Kombiniert mit GSAP Animationen sehr mächtig.
 == Links ==
   https://scrollmagic.io

ScrollMagic - Versionsgeschichte

109.192.169.230 am 11. Mai 2021 um 10:46 Uhr

37.49.72.8 am 7. August 2020 um 11:32 Uhr

37.49.72.8: Die Seite wurde neu angelegt: „Plugin zum Steuern von Events und Animationen abhängig von der Scrollposition. Kombiniert mit GSAP Animationen sehr mächtig. == Links == https://scrollmagi…“