GSAP - Timelines - Versionsgeschichte

134.3.86.14 am 19. April 2024 um 13:03 Uhr

2024-04-19T13:03:01Z

2024-04-19T13:02:31Z

2024-04-19T13:02:13Z

2024-04-19T13:01:17Z

Master Timeline

2024-04-19T13:00:45Z

2022-04-08T12:25:29Z

2022-04-08T12:19:26Z

Master Timeline

@@ Zeile 8: / Zeile 8: @@
 gsap.to("#id", { opacity: 0, duration: 1, delay: 2 }); //wait 2 seconds
-<syntaxhighlight lang="javascript">
 //WITH Timelines (cleaner, more versatile)
 var tl = gsap.timeline({repeat: 2, repeatDelay: 1});

@@ Zeile 4: / Zeile 4: @@
 Gutes Vorgehen für flexiblen Einsatz:
-Celli, I read you question a little differently. it seems you are already using a modular approach, it's just that you are doing
+<syntaxhighlight lang="javascript">
 // WITHOUT Timelines (only using delays):
 gsap.to("#id", { x: 100, duration: 1 });
 gsap.to("#id", { y: 50, duration: 1, delay: 1 }); //wait 1 second
 gsap.to("#id", { opacity: 0, duration: 1, delay: 2 }); //wait 2 seconds
 <syntaxhighlight lang="javascript">

@@ Zeile 24: / Zeile 24: @@
 tl.seek(1.5);
 tl.reverse();
-<syntaxhighlight lang="javascript">
+</syntaxhighlight>
 Ältere Beispiele (v2)

@@ Zeile 5: / Zeile 5: @@
 Celli, I read you question a little differently. it seems you are already using a modular approach, it's just that you are doing
 <syntaxhighlight lang="javascript">
-var first = new TImelineLite();
+//WITH Timelines (cleaner, more versatile)
-var second = new TimelineLite();
+var tl = gsap.timeline({repeat: 2, repeatDelay: 1});
-var third = new TimelineLite();
+tl.to("#id", {x: 100, duration: 1});
-master.add(first);
+// then we can control the whole thing easily...
-master.add(second);
+tl.pause();
-master.add(third);
+tl.resume();
-</syntaxhighlight>
+tl.seek(1.5);
+tl.reverse();
-and want to know why its better to do
+<syntaxhighlight lang="javascript">
 <syntaxhighlight lang="javascript">
 function getFirst() {

← Nächstältere Version		Version vom 8. April 2022, 12:25 Uhr
Zeile 1:		Zeile 1:
		+	https://greensock.com/docs/v3/GSAP/gsap.timeline()
	https://greensock.com/forums/topic/12643-master-timeline-and-the-use-of-functions/		https://greensock.com/forums/topic/12643-master-timeline-and-the-use-of-functions/
	== Master Timeline ==		== Master Timeline ==

@@ Zeile 2: / Zeile 2: @@
 == Master Timeline ==
 Gutes Vorgehen für flexiblen Einsatz:
 <syntaxhighlight lang="javascript">
 function carMove(){