Wikizone - Benutzerbeiträge [de]

GSAP - Snippets

2021-04-16T07:31:20Z

84.157.23.138: /* Globale Timeline kontrollieren */

== Links ==
[[GSAP]]
https://greensock.com/cheatsheet/
https://greensock.com/get-started
https://codepen.io/GreenSock/
https://css-tricks.com/writing-smarter-animation-code/ *****
https://greensock.com/forums/topic/17401-multiple-timelinemax-oncomplete-function-help/
Cool Stuff
https://greensock.com/forums/topic/18128-svg-stroke-dasharray-quick-tip/
Read On
https://greensock.com/forums/topic/22793-how-to-work-with-new-labels-object-in-gsap-3/

== Einfache Animationen ==

gsap.to(".logo", {duration: 2, x: 300}); // Dies nennt sich eine Timeline. 300px nach rechts bewegen in 2s mit Standardwerten (ease out...)
gsap.to(".logo", {duration: 2, x: 300, backgroundColor: "#c2c4c8"}); // CSS Eigenschaften die normal ein - haben, werden als Camelcase geschrieben.
// Eigenschaften mit Zeichen in Anführungsstrichen. Fast alles lässt sich Animieren.
gsap.to(".logo", {duration: 2, x: 300, backgroundColor: "#c2c4c8", borderRadius: "50%", border: "4px solid white"});

=== Ease In Out ===

https://greensock.com/docs/v3/Eases
gsap.to(".logo", {duration: 1, x:300, ease: "power2.inOut"});

Ease Möglichkeiten

//OLD ==> NEW
Elastic.easeOut ==> "elastic.out" //or just "elastic" because ".out" is the default flavor
Elastic.easeIn ==> "elastic.in"
Elastic.easeInOut ==> "elastic.inOut"
Elastic.easeOut.config(1, 0.5) ==> "elastic.out(1, 0.5)" //or just "elastic(1, 0.5)"

//and the other configurable eases are much easier!:
SteppedEase.config(5) ==> "steps(5)"
SlowMo.ease.config(0.5, 0.8) ==> "slow(0.5, 0.8)"
RoughEase.ease.config({points:40}) ==> "rough(40)"
ExpoScaleEase.config(0.5, 3) ==> "expoScale(0.5, 3)"

== Staggering ==
<syntaxhighlight lang="javascript">
gsap.to(".class", {
x:"+=100",
duration:1,
stagger: 0.5 //simple stagger of 0.5 seconds
});

//or get advanced:
gsap.to(".class", {
x:"+=100",
duration:1,
stagger: {
amount:2,
from:"center",
grid:"auto",
onComplete: myFunction //define callbacks inside the stagger to make them apply to each sub-tween
}
});
</syntaxhighlight>

== Relative position prefix ==
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.

gsap.method('selector',{}, "<" ) //Inserts a tween at the start of the previous tween

gsap.method('selector',{}, ">" ) //Inserts a tween at the end of the previous

== Keyframes ==

Anstatt mehrerer Tweens kann man auch mehrere TweenProperties als keyframes kombinieren und hat weniger Tipparbeit.
<syntaxhighlight lang="javascript">
gsap.to(".class", {keyframes: [ //<-- an array of keyframes!
{x:100, duration:1},
{y:200, duration:1, delay:0.5}, //create a 0.5 second gap
{rotation:360, duration:2, delay:-0.25} //overlap by 0.25 seconds
]});
</syntaxhighlight>

== Timelines ==
=== Reset Timeline ===
If you want to set the values to the original position set in the animation you can move the the playhead's position before you kill it:

tl.pause(0).kill(true);
ScrollTrigger.getById("trigger1").kill(true); // you have to do a extra kill for ScrollTrigger if used

If you want to remove all inline styles you can use clearProps:

tl.kill(true);
ScrollTrigger.getById("trigger1").kill(true);
gsap.set("#element", {clearProps: true});

=== Globale Timeline kontrollieren (timeScale)===
<pre>
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()
</pre>

== Rotation ==
=== Richtung der Rotation ===
rotation:"270_short" //animates in the shortest direction!
rotation:"270_cw" //animates clockwise
rotation:"270_ccw" //animates counter-clockwise

== Scroll To ==
<syntaxhighlight lang="javascript">
document.querySelector("button").addEventListener("click", function() {
gsap.to(window, { duration: 0.75, scrollTo: ".target" });
});
</syntaxhighlight>

== 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
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)

== Good Practice and Time Savers ==
=== Timeline schneller abspielen ===
tl.timeScale(3).repeat(2);
=== Bestimmten Teil abspielen ===
tl.play("myLabel");
wobei die Labels so definiert werden:
.addLabel("out3");
oder
.to("#myElement",{duration:1, rotation:90}, "in3");

=== Schleifen ===
Geeignet für gleiche Animation auf mehreren Elementen hintereinander. Dabei übergeben wir in einer Schleife ein DOM Element und erstellen in einer anonymen Funktion den Tween.
<syntaxhighlight lang="javascript">
$(".fade-in").each(function(){
var tween = gsap.from($(this), {duration: 0.5, scale: 0.7, y: '+=30', ease: Linear.easeNone });
// possible with ScrollMagic
var scene = new ScrollMagic.Scene({
triggerElement: this,
})
.setTween(tween);
});
</syntaxhighlight>

=== Default Werte ===
<syntaxhighlight lang="javascript">
gsap.timeline({defaults:{ease:"power2.out", duration:5}})
.to(".selector1", {x:200})
.to(".selector2", {y:500})
</syntaxhighlight>
=== Nesting Timelines ===

=== Functions to create timelines ===

== Responsive Animations & Media Queries==
https://greensock.com/forums/topic/18719-how-to-manage-gsap-animation-in-mobile-device/
https://greensock.com/forums/topic/18280-truly-responsive-animations/
https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

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

== ScrollTrigger ==
https://codepen.io/noeldelgado/pen/BaogqYy
<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>

== Helpers ==
=== gsap loader ===
<syntaxhighlight lang="javascript">
gsap.registerPlugin(ScrollTrigger);

const images = gsap.utils.toArray('img');
const loader = document.querySelector('.loader--text');
const updateProgress = (instance) =>
loader.textContent = `${Math.round(instance.progressedCount * 100 / images.length)}%`;

const showDemo = () => {
document.body.style.overflow = 'auto';
document.scrollingElement.scrollTo(0, 0);
gsap.to(document.querySelector('.loader'), { autoAlpha: 0 });
// do some cool stuff
gsap.utils.toArray('section').forEach((section, index) => {
const w = section.querySelector('.wrapper');
const [x, xEnd] = (index % 2) ? ['100%', (w.scrollWidth - section.offsetWidth) * -1] : [w.scrollWidth * -1, 0];
gsap.fromTo(w, { x }, {
x: xEnd,
scrollTrigger: {
trigger: section,
scrub: 0.5
}
});
});
}
// check how much is loaded
imagesLoaded(images).on('progress', updateProgress).on('always', showDemo);
</syntaxhighlight>

GSAP - Infinite Textbanner

2021-04-16T06:51:41Z

84.157.23.138: Die Seite wurde neu angelegt: „ https://codepen.io/kholja/pen/JjEZBeN?editors=1111 <syntaxhighlight lang="javascript"> // Add Clone at the End // Scale text to at least 100% (container overf…“

https://codepen.io/kholja/pen/JjEZBeN?editors=1111
<syntaxhighlight lang="javascript">
// Add Clone at the End
// Scale text to at least 100% (container overflows and nowrap)
// Move 100% text-width to the left

$(window).resize(resizeHandler);
gsap.registerPlugin('ScrollTrigger');
gsap.defaultEase = "power4.Out";
var time = 12;

// Set text animation
function rollOne(){
//
var tlOne = gsap.timeline();
var $textOne = $(".text-one");
$textOne.css({width:"auto"});
var textWidth = $textOne.width();
console.log(textWidth);
$textOne.width(textWidth);

tlOne.to('.text-one',time,{
x:-textWidth,
ease: Linear.easeNone,
repeat: -1
});
return tlOne;
}

// Create a clone and roll it
function cloneOne(){
$clone = $(".text-one").clone().appendTo(".banner-one");
$clone.addClass("clone");
rollOne();
}

function resizeHandler(){
var progress = tlOne.progress(); //record timeline progress
tlOne.time(0).kill(); //rewind and kill the original tween.
//time = 5;
rollOne().progress(progress); //create a new tween based on the new size, and jump to the same progress value.
}

cloneOne();
GSDevTools.create();

</syntaxhighlight>

GSAP

2021-04-16T06:49:10Z

84.157.23.138: /* Links */

== Greensock Animation Plattform ==
GSAP ist eine Sammlung von JavaScripten zur Animation. Es ist im Moment der quasi Standard wenn es um JavaScript Manipulation von CSS Eigenschaften geht.

GSAP ist in der Basisversion frei. Mit einem kostenpflichtigen Account bekommt man zusätzliche Plugins.

GSAP übernimmt einem Arbeit ab, da es recht gut mit verschiedenen Browsern und Plattformen umgehen kann und außerdem performant arbeitet.

== Links ==
https://greensock.com
https://greensock.com/install
[[GSAP - Snippets]]
https://tympanus.net/codrops/2019/11/14/the-new-features-of-gsap-3/
https://greensock.com/scrollmagic - obsolet mit ScrollTrigger
https://css-tricks.com/writing-smarter-animation-code/ // *****
https://css-tricks.com/tips-for-writing-animation-code-efficiently/ // *****
[[GSAP - Plugins]]

== Beispiele ==
[[GSAP - Infinite Textbanner]]

== Quickstart ==
Einbinden
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
<script src="js/main.js"></script>
Einfache Animationen
<syntaxhighlight lang="javascript">
gsap.to(".logo", {duration: 2, x: 300}); // Dies nennt sich eine Timeline. 300px nach rechts bewegen in 2s mit Standardwerten (ease out...)
gsap.to(".logo", {duration: 2, x: 300, backgroundColor: "#c2c4c8"}); // CSS Eigenschaften die normal ein - haben, werden als Camelcase geschrieben.
// Eigenschaften mit Zeichen in Anführungsstrichen. Fast alles lässt sich Animieren.
gsap.to(".logo", {duration: 2, x: 300, backgroundColor: "#c2c4c8", borderRadius: "50%", border: "4px solid white"});
</syntaxhighlight>
Ease In Out
https://greensock.com/docs/v3/Eases
gsap.to(".logo", {duration: 1, x:300, ease: "power2.inOut"});

== Umstieg von v2 auf v3 / Codesnippets ==
https://greensock.com/3-release-notes
Vieles wurde vereinfacht. Die meisten alten Funktionen funktionieren weiterhin. Neue Projekte sollte man in der neuen Syntax realisieren. Es kamen viele nützliche Dinge hinzu.

=== Vereinheitlichung der Objekte ===
* Keine Unterscheidung mehr zwischen TweenMax und TweenMax Lite, Timeline... Es gibt '''nur noch ein gsap Objekt'''.
* Duration ist jetzt im Eigenschaften Objekt.
//OLD - duration was 2nd parameter
TweenMax.to(".class", 1, {x:100});
//NEW - duration is now a property of the vars object
gsap.to(".class", {duration:1, x:100});
* Ease ist einfacher
<syntaxhighlight lang="javascript">
//OLD ==> NEW
Elastic.easeOut ==> "elastic.out" //or just "elastic" because ".out" is the default flavor
Elastic.easeIn ==> "elastic.in"
Elastic.easeInOut ==> "elastic.inOut"
Elastic.easeOut.config(1, 0.5) ==> "elastic.out(1, 0.5)" //or just "elastic(1, 0.5)"

//and the other configurable eases are much easier!:
SteppedEase.config(5) ==> "steps(5)"
SlowMo.ease.config(0.5, 0.8) ==> "slow(0.5, 0.8)"
RoughEase.ease.config({points:40}) ==> "rough(40)"
ExpoScaleEase.config(0.5, 3) ==> "expoScale(0.5, 3)"
</syntaxhighlight>
=== Vererbung von Timeline Eigenschaften ===
<syntaxhighlight lang="javascript">
gsap.timeline({defaults:{ease:"back", duration:2}})
.to(".class-1", {x:100}) //inherits the ease and duration from the parent timeline!
.to(".class-2", {y:200}) //this one too
</syntaxhighlight>

=== Staggering als Eigenschaft ===
'''Staggering''' in den Properties. Früher mußte man stagger Funktionen nutzen (staggerTo()...)
<syntaxhighlight lang="javascript">
gsap.to(".class", {
x:"+=100",
duration:1,
stagger: 0.5 //simple stagger of 0.5 seconds
});

//or get advanced:
gsap.to(".class", {
x:"+=100",
duration:1,
stagger: {
amount:2,
from:"center",
grid:"auto",
onComplete: myFunction //define callbacks inside the stagger to make them apply to each sub-tween
}
});
</syntaxhighlight>

=== Keyframes ===
Anstatt mehrerer Tweens kann man auch mehrere TweenProperties als keyframes kombinieren und hat weniger Tipparbeit.
<syntaxhighlight lang="javascript">
gsap.to(".class", {keyframes: [ //<-- an array of keyframes!
{x:100, duration:1},
{y:200, duration:1, delay:0.5}, //create a 0.5 second gap
{rotation:360, duration:2, delay:-0.25} //overlap by 0.25 seconds
]});
</syntaxhighligh>

=== Neue Timeline Control Features ===
Standardmäßig startet ein Tween nachdem der vorige beendet ist. möchte man ihn gleichzeitig starten musste man früher mit Labels arbeiten, oder die Dauer wissen und ihn vorziehen. Jetzt geht das einfacher. '''Man kann eine nachfolgende Animation relativ zum Endpunkt ODER zum Startpunkt der vorigen positionieren.'''
* "<" references the most recently-added animation's START time
* ">" references the most recently-added animation's END time

<syntaxhighlight lang="javascript">
var tl = gsap.timeline();
tl.to(...)
.to(..., "") //starts immediately after the previous tween's end time (sequenced)
.to(..., ">-0.5") //overlaps with the previous tween by 0.5 seconds (because the number is negative)
</syntaxhighlight>

=== Globale Timeline kontrollieren ===
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()

=== Sinnvollere Aliase ===
* Sinnvollere Aliase für CSS-Eigenschaften: x -> translateX, y -> translateY, rotate -> rotation
Geschickte Shortcuts für Rotation:
rotation:"270_short" //animates in the shortest direction!
rotation:"270_cw" //animates clockwise
rotation:"270_ccw" //animates counter-clockwise
Einheiten für x und y Transformationen möglich:
gsap.to(".class", {
x:"50vw", //units! (default is px)
y:"5em"
});
=== Sonstiges ===
* '''MotionPathPlugin''' ersetzt BezierPlugin. Hat zusätzlich einen '''Editor''' (nur Club Members)
* Neue '''random''' Funktion
* '''getProperty''' Funktion mit Konvertierung von Einheiten
* Es lassen sich "'''effects'''" definieren, die man dann als Animation / Timeline wieder verwenden kann. Auch Parameter kann man nutzen.
* Man kann jetzt width und height von DOM Objekten animieren die mit "'''auto'''" definiert sind.
* Snap Plugin - bietet mehrere Möglichkeiten auf bestimmte Werte zu runden (in Array, in der Nähe...)
* Zahlreiche nützliche Utility Funktionen