GSAP - Snippets - Versionsgeschichte

134.3.74.15: /* Keyframes */

2022-03-31T04:21:59Z

Keyframes

2022-03-31T04:06:43Z

Relative position prefix

2021-05-17T06:14:19Z

Plugins

2021-05-11T10:45:20Z

ScrollTrigger

2021-04-23T07:06:08Z

GSAP Scroll Trigger

2021-04-16T07:31:20Z

Globale Timeline kontrollieren

2021-03-12T17:33:01Z

ScrollTrigger

2021-03-12T17:30:02Z

ScrollTrigger

2021-03-12T13:54:45Z

2021-02-18T18:20:22Z

GSAP Scroll Trigger

@@ Zeile 93: / Zeile 93: @@
 == Keyframes ==
-Anstatt mehrerer Tweens kann man auch mehrere TweenProperties als keyframes kombinieren und hat weniger Tipparbeit.
+Anstatt mehrerer Tweens kann man auch mehrere TweenProperties als keyframes kombinieren und hat weniger Tipparbeit. Aber Keyframes bieten noch einiges mehr:
 <syntaxhighlight lang="javascript">
 gsap.to(".class", {keyframes: [ //<-- an array of keyframes!

@@ Zeile 59: / Zeile 59: @@
 </syntaxhighlight>
-== Relative position prefix ==
+== Positioning ==
 Relative “>” and “<” position prefix
 This feature helps with positioning animations in a timeline. It puts a tween relative to the previous tween’s start or end time and removes the need to add labels through your code.
@@ Zeile 66: / Zeile 67: @@
 gsap.method('selector',{}, ">" ) //Inserts a tween at the end of the previous
 == Keyframes ==

@@ Zeile 159: / Zeile 159: @@
 == Plugins ==
 === SVGMorph ===
   gsap.to("#circle", {duration: 1, morphSVG:"#hippo"});

@@ Zeile 163: / Zeile 163: @@
 == ScrollTrigger ==
   https://codepen.io/noeldelgado/pen/BaogqYy
 <syntaxhighlight lang="javascript">

@@ Zeile 112: / Zeile 112: @@
 == GSAP Scroll Trigger ==
 Update: Die beste Möglichkeit ist mit dem neuen ScrollTrigger Plugin.
   https://www.youtube.com/watch?v=X7IBa7vZjmo Intro mit Beispielen
   https://greensock.com/scrolltrigger Main Page

@@ Zeile 78: / Zeile 78: @@
 </syntaxhighlight>
-== Globale Timeline kontrollieren ==
+== Timelines ==
 gsap.globalTimeline.timeScale(0.1); //slow everything down
 gsap.globalTimeline.pause(); //stop everything, though you might want to use gsap.exportRoot() instead so that you can exclude delayedCalls()
 == Rotation ==

← Nächstältere Version		Version vom 12. März 2021, 13:54 Uhr
Zeile 146:		Zeile 146:
	=== SVGMorph ===		=== SVGMorph ===
	gsap.to("#circle", {duration: 1, morphSVG:"#hippo"});		gsap.to("#circle", {duration: 1, morphSVG:"#hippo"});
		+
		+	== ScrollTrigger ==
		+	<syntaxhighlight lang="javascript">
		+	// Array erstellen um Animation auf viele Elemente anzuwenden
		+	var panels = gsap.utils.toArray(".panel");
		+	let container = document.querySelector('.scroll-container')
		+
		+	tl = gsap.timeline();
		+	tl.to(panels, { //each panel
		+	xPercent: -100 * (panels.length -1), // move complete width i.e. -500%
		+	scrollTrigger: {
		+	trigger: ".scroll-container",
		+	pin: true,
		+	markers: true,
		+	end: () => "+=" + document.querySelector(".scroll-container").offsetWidth,
		+	}
		+	});
		+
		+	// ODER
		+
		+	panels.forEach((panel, i) => {
		+	gsap.to(panel, {
		+	//...
		+	}
		+	})
		+	</syntaxhighlight>