GSAP - ScrollTrigger: Unterschied zwischen den Versionen
Aus Wikizone
(Die Seite wurde neu angelegt: „Update: Die beste Möglichkeit Scrolling mit Animationen zu verbinden ist mit dem neuen (2020) ScrollTrigger Plugin. https://www.youtube.com/watch?v=X7IBa7vZj…“) |
|||
| Zeile 6: | Zeile 6: | ||
Obsolet: https://codepen.io/osublake/pen/a633d0c9e6e2b951496d7f1eb4fd8fb6 (ohne ScrollMagic) | Obsolet: https://codepen.io/osublake/pen/a633d0c9e6e2b951496d7f1eb4fd8fb6 (ohne ScrollMagic) | ||
| + | |||
| + | == Quickstart == | ||
| + | Eine gute Methode vorzugehen: | ||
| + | * Timeline-Animation ohne ScrollTrigger bauen | ||
| + | * ScrollTrigger Konfiguration in die Timeline einbauen. | ||
| + | |||
| + | == MatchMedia == | ||
| + | Mit MatchMedia kann man unterschiedliche ScrollTrigger für unterschiedliche Bildschirme nutzen. | ||
| + | https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia() | ||
Version vom 23. April 2021, 08:09 Uhr
Update: Die beste Möglichkeit Scrolling mit Animationen zu verbinden ist mit dem neuen (2020) ScrollTrigger Plugin.
https://www.youtube.com/watch?v=X7IBa7vZjmo Intro mit Beispielen https://greensock.com/scrolltrigger Main Page https://greensock.com/docs/v3/Plugins/ScrollTrigger Documentation https://greensock.com/st-mistakes/ Häufige Fehler (auch mit each Schleifen) Obsolet: https://codepen.io/osublake/pen/a633d0c9e6e2b951496d7f1eb4fd8fb6 (ohne ScrollMagic)
Quickstart
Eine gute Methode vorzugehen:
- Timeline-Animation ohne ScrollTrigger bauen
- ScrollTrigger Konfiguration in die Timeline einbauen.
MatchMedia
Mit MatchMedia kann man unterschiedliche ScrollTrigger für unterschiedliche Bildschirme nutzen.
https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()
