### Animation with Timeline Start Reference
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/Timeline/to().md
This example uses the "timelineStart" reference point to position an animation at the beginning of the timeline with the to() method. Useful for animations that should always start first.
```javascript
tl.to(".green-box", { x: 100, duration: 1, position: "timelineStart" });
```
--------------------------------
### Basic Timeline Setup with from()
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/Timeline/from().md
This snippet demonstrates the fundamental usage of GSAP's TimelineLite/Max with the from() method to animate elements from a specific starting point. It requires GSAP to be included in the project.
```javascript
console.clear();
gsap.registerPlugin(Draggable, CustomEase, CustomWiggle);
CustomWiggle.create("wiggle", {wiggles:5, type:"easeInOut"});
new Vue({
el: "#app",
data() {
return {
labelPosition: 1,
paused: false,
roundedMilliseconds: 0,
percentRange: 200,
secondsRange: 5,
useRecent: false,
referencePoint: "timelineStart",
offsetType: "seconds",
offsetNumber: 1,
position: 0,
hidePosition: false,
lastSecond: 1,
lastPercent: 50,
endX: 500,
timelineItems: [],
timelineData: [
{ class: "purple gradient-purple" },
{ class: "green gradient-green" }
]
}
},
mounted() {
this.setScrubber = gsap.quickSetter(this.$refs.scrubber, "x", "px");
this.clampSeconds = gsap.utils.clamp(-this.secondsRange, this.secondsRange);
this.clampPercent = gsap.utils.clamp(-this.percentRange, this.percentRange);
this.mapSize = gsap.utils.mapRange(30, 90, 1.1, 0.65);
this.timeline = gsap.timeline();
this.createScrubber();
this.renderTimeline();
window.addEventListener("resize", this.onResize);
this.$nextTick(() => {
this.onResize();
this.timeline.eventCallback("onUpdate", this.updateScrubber);
gsap.to("#app", { opacity: 1 });
});
},
computed: {
formattedPosition() {
if (this.hidePosition) {
return "";
}
if (this.referencePoint !== "timelineStart") {
return `"${this.position}"`;
}
return this.position;
},
range() {
return this.offsetType === "percent" ? this.percentRange : this.secondsRange;
},
usePrevious() {
return this.referencePoint.includes("previous") && this.offsetType === "percent";
}
},
watch: {
formattedPosition: "animatePosition",
useRecent: "renderTimeline",
referencePoint(value) {
if (value === "timelineStart") {
this.offsetType = "seconds";
}
this.renderTimeline();
},
offsetNumber(value) {
value = parseFloat(value);
if (isNaN(value)) return;
if (this.offsetType === "percent") {
this.offsetNumber = this.clampPercent(value);
} else {
this.offsetNumber = this.clampSeconds(value);
}
this.renderTimeline();
},
offsetType(value) {
if (value === "percent") {
this.lastSecond = this.offsetNumber;
this.offsetNumber = this.lastPercent;
} else {
this.lastPercent = this.offsetNumber;
this.offsetNumber = this.lastSecond;
}
this.renderTimeline();
}
},
methods: {
renderTimeline() {
this.position = this.getPosition();
this.endX = this.scrubber.maxX - 56;
let tl = this.timeline;
tl.progress(0)
.clear(true)
.addLabel("myLabel", this.labelPosition)
.to(this.$refs.purple, {
ease: "none",
duration: 2,
x: this.endX,
data: this.timelineData[0]
}, 0)
.to(this.$refs.green, {
ease: "none",
duration: 1,
x: this.endX,
data: this.timelineData[1]
}, this.position);
let timelineItems = [];
let time = tl.duration();
let children = tl.getChildren();
let milliseconds = time * 10;
this.roundedMilliseconds = Math.floor(milliseconds) + 1;
let fontSize = this.mapSize(this.roundedMilliseconds);
document.documentElement.style.setProperty('--number-size', fontSize + "rem");
children.forEach((child, index) => {
let duration = child.totalDuration();
let startTime = child.startTime();
let width = (duration / time) * 100;
let startPosition = (startTime / time) * 100;
timelineItems[index] = {
...child.data,
style: {
width: `${width}%`,
marginLeft: `${startPosition}%`
}
};
});
this.timelineItems = timelineItems;
},
getPosition() {
this.hidePosition = false;
let value = parseFloat(this.offsetNumber);
let isNegative = value < 0;
let isPercent = this.offsetType === "percent";
if (this.referencePoint !== "timelineStart") {
value = Math.abs(value);
}
```
--------------------------------
### Timeline `from()` Method Example
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/Timeline/from().md
Demonstrates the basic usage of the `from()` method to animate elements from a specified starting state. This is useful for creating entry animations.
```javascript
let tl = gsap.timeline();
tl.from(".box", { x: 100, opacity: 0, duration: 1 });
```
--------------------------------
### ScrambleTextPlugin Usage Examples
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/Plugins/ScrambleTextPlugin.html
Examples demonstrating how to use the ScrambleTextPlugin with default and customized settings.
```javascript
// Use the defaults
gsap.to(element, {duration: 1, scrambleText: "THIS IS NEW TEXT"});
// Customize things:
gsap.to(element, {
duration: 1,
scrambleText: {
text: "THIS IS NEW TEXT",
chars: "XO",
revealDelay: 0.5,
speed: 0.3,
newClass: "myClass"
}
});
```
--------------------------------
### quickTo() with Optional Numeric Start Value
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/gsap.quickTo().html
Demonstrates overriding the default starting value for a quickTo() animation. The first parameter is the target value, and the second is the explicit starting value.
```javascript
let xTo = gsap.quickTo("#id", "x", { duration: 0.8 });
xTo(100); // animates to 100 from current value inside the tween at its current progress
xTo(100, 500); // animates to 100 from 500
```
--------------------------------
### CSS for matchMedia Responsive Example
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/gsap.matchMedia().md
This CSS styles the elements for the matchMedia() example, including responsive adjustments for smaller screens.
```css
/* external styles https://codepen.io/GreenSock/pen/xxmzBrw/fcaef74061bb7a76e5263dfc076c363e.css */
body {
text-align: center;
font-weight: 300;
}
header {
padding: 0 1rem;
margin: 0 auto;
}
h1 {
margin: 0;
padding: 35px 10px;
font-weight: 400;
}
.gray {
position: relative;
width: 100%;
height: 100vh;
}
.mobile, .desktop {
width: 200px;
height: 100px;
border-radius: 5px;
background: var(--purple);
position: absolute;
z-index: 0;
left: 30%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
text-align: center;
font-size: 1.5em;
font-weight: 400;
line-height: 100px;
color: white;
}
.desktop {
left: 70%;
background: var(--green);
}
.gray p {
margin: 0;
padding: 30px;
}
.bottom {
width: 100%;
text-align: center;
padding: 150px 30px;
font-size: 1.5em;
box-sizing: border-box;
}
a {
text-decoration: none;
font-weight: 400;
}
a:hover {
text-decoration: underline;
}
@media (max-width: 799px) {
.mobile, .desktop {
width: 100px;
}
}
```
--------------------------------
### Get and Set Timeline startTime
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/Timeline/startTime().html
Use startTime() without parameters to get the current start time of an animation on its parent timeline. Provide a numeric value to set a new start time, enabling easier chaining.
```javascript
var start = tl.startTime();
tl.startTime(2);
```
--------------------------------
### Basic Desktop/Mobile Setup with MatchMedia
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/gsap.matchMedia().html
Use matchMedia to add different animation setups for desktop and mobile breakpoints. The function passed to add() will execute when the specified media query matches.
```javascript
let mm = gsap.matchMedia();
mm.add("(min-width: 800px)", () => {
// desktop setup code here...
});
mm.add("(max-width: 799px)", () => {
// mobile setup code here...
});
```
--------------------------------
### gsap.quickSetter() Usage
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/gsap.quickSetter().md
This example demonstrates how to use gsap.quickSetter() to create efficient setters for element properties. It sets initial properties and then uses the created setters to update the 'x' and 'y' properties of a '.flair' element based on mouse movement.
```APIDOC
## gsap.quickSetter()
### Description
Creates a highly optimized function that instantly sets a specific property on a target element. This is useful for performance-critical scenarios where immediate updates are needed, such as following the mouse cursor.
### Method
`gsap.quickSetter(target, property, unit)`
### Parameters
- **target** (string | object | array): The element(s) to target. Can be a CSS selector, a DOM element, or an array of elements.
- **property** (string): The CSS property to set (e.g., "x", "y", "opacity").
- **unit** (string, optional): The unit to append to the value (e.g., "px", "%"). Defaults to "".
### Returns
A function that accepts a value and applies it to the specified property of the target element(s).
### Example
```javascript
// Set initial properties for elements with the class 'flair'
gsap.set(".flair", {xPercent: -50, yPercent: -50});
// Create a quick setter for the 'x' property with 'px' units
let xSetter = gsap.quickSetter(".flair", "x", "px");
// Create a quick setter for the 'y' property with 'px' units
let ySetter = gsap.quickSetter(".flair", "y", "px");
// Add an event listener to update the element's position on mouse move
window.addEventListener("mousemove", e => {
xSetter(e.x); // Update x position
ySetter(e.y); // Update y position
});
```
### Note
If you need to animate to new values instead of instantly setting them, consider using `gsap.quickTo()`.
```
--------------------------------
### Basic Usage and Defining Start Value with quickTo()
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/gsap.quickTo().md
Demonstrates how to use gsap.quickTo() to create an animation function for the 'x' property. The first call animates from the current value, while the second call specifies both the target value (100) and a starting value (500).
```javascript
let xTo = gsap.quickTo("#id", "x", { duration: 0.8 });
xTo(100); // animates to 100 from current value inside the tween at its current progress
xTo(100, 500); // animates to 100 from 500
```
--------------------------------
### Get Scroll Position for Animation
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/HelperFunctions/helpers/getScrollPosition.html
Use this function to get the scroll position for a GSAP animation with a ScrollTrigger. It accepts the animation object and an optional progress value (0 for start, 1 for end).
```javascript
function getScrollPosition(animation, progress) {
let p = gsap.utils.clamp(0, 1, progress || 0),
st = animation.scrollTrigger,
containerAnimation = st.vars.containerAnimation;
if (containerAnimation) {
let time = st.start + (st.end - st.start) * p;
st = containerAnimation.scrollTrigger;
return (
st.start + (st.end - st.start) * (time / containerAnimation.duration())
);
}
return st.start + (st.end - st.start) * p;
}
```
--------------------------------
### Get Tweens of Multiple Objects
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/gsap.getTweensOf().html
This example shows how to get all active tweens for an array of targets, including obj1 and obj2. This is helpful when you need to manage animations across multiple elements simultaneously.
```javascript
gsap.to(obj1, { x: 100 });
gsap.to(obj2, { x: 100 });
gsap.to([obj1, obj2], { opacity: 0 });
var a2 = gsap.getTweensOf([obj1, obj2]); //finds 3 tweens
```
--------------------------------
### GSAP Timeline Setup and Basic Animation
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/Timeline/fromTo().md
This snippet demonstrates the basic setup of a GSAP timeline, including registering plugins, creating custom eases, and rendering animations. It shows how to use `gsap.timeline()` and add tweens with specific durations and positions.
```javascript
console.clear();
// "<25%" (use recent), "<+=25%" (use inserting)
gsap.registerPlugin(Draggable, CustomEase, CustomWiggle);
CustomWiggle.create("wiggle", {wiggles:5, type:"easeInOut"});
new Vue({
el: "#app",
data() {
return {
labelPosition: 1,
paused: false,
roundedMilliseconds: 0,
percentRange: 200,
secondsRange: 5,
useRecent: false,
referencePoint: "timelineStart",
offsetType: "seconds",
offsetNumber: 1,
position: 0,
hidePosition: false,
lastSecond: 1,
lastPercent: 50,
endX: 500,
timelineItems: [],
timelineData: [
{ class: "purple gradient-purple" },
{ class: "green gradient-green" }
]
}
},
mounted() {
this.setScrubber = gsap.quickSetter(this.$refs.scrubber, "x", "px");
this.clampSeconds = gsap.utils.clamp(-this.secondsRange, this.secondsRange);
this.clampPercent = gsap.utils.clamp(-this.percentRange, this.percentRange);
this.mapSize = gsap.utils.mapRange(30, 90, 1.1, 0.65);
this.timeline = gsap.timeline();
this.createScrubber();
this.renderTimeline();
window.addEventListener("resize", this.onResize);
this.$nextTick(() => {
this.onResize();
this.timeline.eventCallback("onUpdate", this.updateScrubber);
gsap.to("#app", { opacity: 1 });
});
},
computed: {
formattedPosition() {
if (this.hidePosition) {
return "";
}
if (this.referencePoint !== "timelineStart") {
return `"${this.position}"`;
}
return this.position;
},
range() {
return this.offsetType === "percent" ? this.percentRange : this.secondsRange;
},
usePrevious() {
return this.referencePoint.includes("previous") && this.offsetType === "percent";
}
},
watch: {
formattedPosition: "animatePosition",
useRecent: "renderTimeline",
referencePoint(value) {
if (value === "timelineStart") {
this.offsetType = "seconds";
}
this.renderTimeline();
},
offsetNumber(value) {
value = parseFloat(value);
if (isNaN(value)) return;
if (this.offsetType === "percent") {
this.offsetNumber = this.clampPercent(value);
} else {
this.offsetNumber = this.clampSeconds(value);
}
this.renderTimeline();
},
offsetType(value) {
if (value === "percent") {
this.lastSecond = this.offsetNumber;
this.offsetNumber = this.lastPercent;
} else {
this.lastPercent = this.offsetNumber;
this.offsetNumber = this.lastSecond;
}
this.renderTimeline();
}
},
methods: {
renderTimeline() {
this.position = this.getPosition();
this.endX = this.scrubber.maxX - 56;
let tl = this.timeline;
tl.progress(0)
.clear(true)
.addLabel("myLabel", this.labelPosition)
.to(this.$refs.purple, {
ease: "none",
duration: 2,
x: this.endX,
data: this.timelineData[0]
}, 0)
.to(this.$refs.green, {
ease: "none",
duration: 1,
x: this.endX,
data: this.timelineData[1]
}, this.position);
let timelineItems = [];
let time = tl.duration();
let children = tl.getChildren();
let milliseconds = time * 10;
this.roundedMilliseconds = Math.floor(milliseconds) + 1;
let fontSize = this.mapSize(this.roundedMilliseconds);
document.documentElement.style.setProperty('--number-size', fontSize + "rem");
children.forEach((child, index) => {
let duration = child.totalDuration();
let startTime = child.startTime();
let width = (duration / time) * 100;
let startPosition = (startTime / time) * 100;
timelineItems[index] = {
...child.data,
style: {
width: `${width}%`,
marginLeft: `${startPosition}%`
}
};
});
this.timelineItems = timelineItems;
},
getPosition() {
this.hidePosition = false;
let value = parseFloat(this.offsetNumber);
let isNegative = value < 0;
let isPercent = this.offsetType === "percent";
if (this.referencePoint !== "timelineStart") {
value = Math.abs(value);
}
```
--------------------------------
### Timeline with onStart and Parameters
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/Timeline/vars.md
Shows how to define an onStart callback function and its parameters for a GSAP Timeline.
```javascript
gsap.timeline({onStart: myFunction, onStartParams: ["param1", "param2"]});
```
--------------------------------
### ScrollTrigger.start
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/Plugins/ScrollTrigger/start.md
The read-only 'start' property of a ScrollTrigger instance returns its calculated starting scroll position in pixels. This value is dynamic and gets recalculated whenever the ScrollTrigger is refreshed, such as during window or scroller resizing.
```APIDOC
## ScrollTrigger.start
### Description
The read-only `start` property of a ScrollTrigger instance returns its calculated starting scroll position in pixels. This value is dynamic and gets recalculated whenever the ScrollTrigger is refreshed, such as during window or scroller resizing.
### Property
- **start** (Number) - Read-only. The scroll position in pixels where the ScrollTrigger becomes active.
### Details
This value is automatically calculated when the ScrollTrigger is refreshed. For instance, if a trigger element is positioned 100px below the viewport and the ScrollTrigger's `start` variable was set to "top bottom", the calculated `start` property would be 100 pixels. Both `start` and `end` properties are always numeric and represent scroll positions in pixels.
```
--------------------------------
### Basic Timeline Setup with to()
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/Timeline/to().md
Demonstrates the fundamental setup of a GSAP timeline and adding animations using the to() method. This is useful for sequencing multiple animations.
```javascript
console.clear();
gsap.registerPlugin(Draggable, CustomEase, CustomWiggle);
CustomWiggle.create("wiggle", {wiggles:5, type:"easeInOut"});
new Vue({
el: "#app",
data() {
return {
labelPosition: 1,
paused: false,
roundedMilliseconds: 0,
percentRange: 200,
secondsRange: 5,
useRecent: false,
referencePoint: "timelineStart",
offsetType: "seconds",
offsetNumber: 1,
position: 0,
hidePosition: false,
lastSecond: 1,
lastPercent: 50,
endX: 500,
timelineItems: [],
timelineData: [
{ class: "purple gradient-purple" },
{ class: "green gradient-green" }
]
}
},
mounted() {
this.setScrubber = gsap.quickSetter(this.$refs.scrubber, "x", "px");
this.clampSeconds = gsap.utils.clamp(-this.secondsRange, this.secondsRange);
this.clampPercent = gsap.utils.clamp(-this.percentRange, this.percentRange);
this.mapSize = gsap.utils.mapRange(30, 90, 1.1, 0.65);
this.timeline = gsap.timeline();
this.createScrubber();
this.renderTimeline();
window.addEventListener("resize", this.onResize);
this.$nextTick(() => {
this.onResize();
this.timeline.eventCallback("onUpdate", this.updateScrubber);
gsap.to("#app", { opacity: 1 });
});
},
computed: {
formattedPosition() {
if (this.hidePosition) {
return "";
}
if (this.referencePoint !== "timelineStart") {
return `"${this.position}"`;
}
return this.position;
},
range() {
return this.offsetType === "percent" ? this.percentRange : this.secondsRange;
},
usePrevious() {
return this.referencePoint.includes("previous") && this.offsetType === "percent";
}
},
watch: {
formattedPosition: "animatePosition",
useRecent: "renderTimeline",
referencePoint(value) {
if (value === "timelineStart") {
this.offsetType = "seconds";
}
this.renderTimeline();
},
offsetNumber(value) {
value = parseFloat(value);
if (isNaN(value)) return;
if (this.offsetType === "percent") {
this.offsetNumber = this.clampPercent(value);
} else {
this.offsetNumber = this.clampSeconds(value);
}
this.renderTimeline();
},
offsetType(value) {
if (value === "percent") {
this.lastSecond = this.offsetNumber;
this.offsetNumber = this.lastPercent;
} else {
this.lastPercent = this.offsetNumber;
this.offsetNumber = this.lastSecond;
}
this.renderTimeline();
}
},
methods: {
renderTimeline() {
this.position = this.getPosition();
this.endX = this.scrubber.maxX - 56;
let tl = this.timeline;
tl.progress(0)
.clear(true)
.addLabel("myLabel", this.labelPosition)
.to(this.$refs.purple, {
ease: "none",
duration: 2,
x: this.endX,
data: this.timelineData[0]
}, 0)
.to(this.$refs.green, {
ease: "none",
duration: 1,
x: this.endX,
data: this.timelineData[1]
}, this.position);
let timelineItems = [];
let time = tl.duration();
let children = tl.getChildren();
let milliseconds = time * 10;
this.roundedMilliseconds = Math.floor(milliseconds) + 1;
let fontSize = this.mapSize(this.roundedMilliseconds);
document.documentElement.style.setProperty('--number-size', fontSize + "rem");
children.forEach((child, index) => {
let duration = child.totalDuration();
let startTime = child.startTime();
let width = (duration / time) * 100;
let startPosition = (startTime / time) * 100;
timelineItems[index] = {
...child.data,
style: {
width: `${width}%`,
marginLeft: `${startPosition}%`
}
};
});
this.timelineItems = timelineItems;
},
getPosition() {
this.hidePosition = false;
let value = parseFloat(this.offsetNumber);
let isNegative = value < 0;
let isPercent = this.offsetType === "percent";
if (this.referencePoint !== "timelineStart") {
value = Math.abs(value);
}
```
--------------------------------
### Get and Set startTime for GSAP Tween
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/Tween/startTime().md
Use the startTime() method to retrieve the current start time of an animation or to set a new start time. When setting the time, the method returns the animation instance for chaining.
```javascript
//gets current start time
var start = myAnimation.startTime();
//sets the start time
myAnimation.startTime(2);
```
--------------------------------
### onLeaveBack Callback Example
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/Plugins/ScrollTrigger/index.html
Use this callback when the scroll position moves backward past the 'start' of the trigger. It receives the ScrollTrigger instance.
```javascript
onLeaveBack: ({progress, direction, isActive}) => console.log(progress, direction, isActive)
```
--------------------------------
### Example Usage
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/UtilityMethods/clamp().html
Demonstrates how to use the clamp() utility method to create a reusable clamping function and then apply it to various values.
```javascript
var clamper = gsap.utils.clamp(0, 100);
console.log(clamper(105)); // Output: 100
console.log(clamper(-50)); // Output: 0
console.log(clamper(20)); // Output: 20
```
--------------------------------
### gsap.matchMedia()
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/gsap.matchMedia().html
Initializes a MatchMedia instance for managing responsive animations.
```APIDOC
## gsap.matchMedia()
### Description
Creates a MatchMedia instance. This instance can be used to register multiple media queries and their associated callback functions. All GSAP animations and ScrollTriggers created within these callbacks are automatically managed and can be reverted.
### Method
`gsap.matchMedia()`
### Returns
- `MatchMedia` - An instance of MatchMedia that can be used to add and manage responsive animations.
```
--------------------------------
### from() Animation with Timeline
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/Timeline/from().md
This example shows how to use the from() method within a GSAP Timeline. The animation starts from the specified state and is positioned on the timeline.
```javascript
tl.from(".green-box", {
x: 500,
duration: 1
}, "start");
```
--------------------------------
### Combine GSAP Utilities with quickSetter
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/gsap.quickSetter().html
This example demonstrates combining gsap.utils.clamp(), gsap.utils.snap(), and gsap.quickSetter() to create a function that sanitizes and sets a property with a specific unit. It ensures values are within a range, snapped to increments, and have a unit appended.
```javascript
let xSetter = gsap.utils.pipe(
gsap.utils.clamp(0, 100), //make sure the number is between 0 and 100
gsap.utils.snap(5), //snap to the closest increment of 5
gsap.quickSetter("#id", "x", "px") //apply it to the #id element's x property and append a "px" unit
);
//then later...
xSetter(150) //sets the #el's transform to translateX(100px) (clamped to 100)
xSetter(3) //sets it to 5px (snapped)...
```
--------------------------------
### Observer.getAll()
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/Plugins/Observer/static.getAll().md
Gets an Array of all Observers that have been created (and not killed). This can be useful if, for example, your framework requires that you kill everything like on a routing change.
```APIDOC
## Observer.getAll()
### Description
Gets an Array of all Observers that have been created (and not killed). This can be useful if, for example, your framework requires that you kill everything like on a routing change.
### Method
GET (or equivalent for SDK)
### Endpoint
Observer.getAll()
### Returns
- Array - An Array of Observer instances
### Example
```javascript
Observer.getAll((o) => o.kill());
```
```
--------------------------------
### Basic Timeline Setup and getChildren() Usage
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/Timeline/getChildren().html
Demonstrates setting up a master timeline with nested tweens and a nested timeline, then using getChildren() to retrieve direct children.
```javascript
var master = gsap.timeline({ defaults: { duration: 1 } }),
nested = gsap.timeline();
nested.to("#e1", { duration: 1, x: 100 }).to("#e2", { duration: 2, y: 200 });
master
.to("#e3", { top: 200 })
.to("#e4", { left: 100 })
.to("#e5", { backgroundColor: "red" });
master.add(nested);
var children = master.getChildren(false, true, true);
console.log(children.length); //"3" (2 tweens and 1 timeline)
```
--------------------------------
### Get Tween Progress
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/Tween/progress().html
Retrieves the current progress of the tween. This value ranges from 0 (start) to 1 (end) and does not account for repeats.
```javascript
var progress = myTween.progress();
```
--------------------------------
### HTML Structure for matchMedia Example
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/gsap.matchMedia().md
This HTML sets up the basic structure for the responsive animation example, including headers and divs for mobile and desktop content.
```html
Pretty cool, right?
Resize your screen. 800px is the break point. It's all dynamic!
Check out GSAP today.
```
--------------------------------
### ScrollTrigger Markers Example
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/Plugins/ScrollTrigger/index.html
Enables visual markers for start, end, and trigger points during development. Customize marker colors and font size.
```javascript
markers: {
startColor: "green",
endColor: "red",
fontSize: "12px"
}
```
--------------------------------
### Get or Create a Batch Instance
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/Plugins/Flip/static.batch().html
Obtain an existing batch instance by ID or create a new one to start coordinating Flip animations.
```javascript
let batch = Flip.batch("id");
```
--------------------------------
### HTML Structure for matchMedia Example
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/gsap.matchMedia().md
This HTML sets up the basic structure for a GSAP matchMedia() demonstration, including a header and a section for animation.
```html
```
--------------------------------
### Import GSAP in JavaScript
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/index.md
Import the GSAP library into your JavaScript files to start using its animation capabilities. Ensure you have installed GSAP first.
```javascript
import { gsap } from "gsap"
```
--------------------------------
### Minimal gsap.matchMedia() Usage
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/gsap.matchMedia().html
This snippet demonstrates the basic usage of gsap.matchMedia(). It initializes a matchMedia instance, adds a media query condition, and defines setup code (animations and ScrollTriggers) that runs when the condition is met. An optional cleanup function can be returned to revert changes when the condition is no longer met.
```javascript
let mm = gsap.matchMedia();
// add a media query. When it matches, the associated function will run
mm.add("(min-width: 800px)", () => {
// this setup code only runs when viewport is at least 800px wide
gsap.to("selector", { x: 100 });
gsap.from("selector", { opacity: 0 });
ScrollTrigger.create({
trigger: "#element",
start: "top top",
pin: true
});
return () => {
// optional
// custom cleanup code here (runs when it STOPS matching)
};
});
// later, if we need to revert all the animations/ScrollTriggers...
// mm.revert();
```
--------------------------------
### Get and Set startTime on GSAP Timeline
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/Timeline/startTime().md
Use this snippet to retrieve the current start time of a tween on a timeline or to set a new start time. Omitting the value acts as a getter, while providing a number sets the value and returns the timeline instance for chaining.
```javascript
//gets current start time
var start = tl.startTime();
//sets
tl.startTime(2);
```
--------------------------------
### Progressive Build Function Usage Example
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/HelperFunctions/helpers/progressiveBuild.md
Demonstrates how to use the progressiveBuild function. Functions are passed as arguments, with numbers indicating delays between them.
```javascript
progressiveBuild(
step1,
step2,
1.5, // 1.5-second delay (sprinkle between any two functions)
step3
);
```
--------------------------------
### Basic fromTo() Animation
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/Timeline/fromTo().md
Animates the 'x' property from 0 to 100. This is a fundamental example of using fromTo() to define both the start and end values of an animation.
```javascript
let tween = gsap.fromTo("#myElement", { x: 0 }, { x: 100 });
```
--------------------------------
### Basic quickTo() Usage for Mouse Following
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/gsap.quickTo().html
Creates optimized functions for 'x' and 'y' properties to follow mouse coordinates. Requires a target element with the ID 'id' and a container element with the ID 'container'.
```javascript
let xTo = gsap.quickTo("#id", "x", { duration: 0.4, ease: "power3" }), yTo = gsap.quickTo("#id", "y", { duration: 0.4, ease: "power3" });
document.querySelector("#container").addEventListener("mousemove", (e) => {
xTo(e.pageX);
yTo(e.pageY);
});
```
--------------------------------
### Initialize and Use quickSetter for Mouse Following
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/gsap.quickSetter().md
This snippet demonstrates how to use gsap.quickSetter() to create a mouse follower effect. It initializes setters for the 'x' and 'y' properties of a '.flair' element and updates them on mouse movement. The 'px' unit is appended to the values.
```javascript
gsap.set(".flair", {xPercent: -50, yPercent: -50});
let xSetter = gsap.quickSetter(".flair", "x", "px") //apply it to the #id element's x property and append a "px" unit
let ySetter = gsap.quickSetter(".flair", "y", "px") //apply it to the #id element's x property and append a "px" unit
window.addEventListener("mousemove", e => {
xSetter(e.x)
ySetter(e.y)
});
```
--------------------------------
### Get Drag Direction from Start
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/Plugins/Draggable/getDirection().md
Retrieves the direction of the drag gesture from the initial point of contact. This is useful for understanding the user's intended movement.
```javascript
directionStart.innerHTML = '"' + this.getDirection("start") + '"'; //direction from start of drag
```
--------------------------------
### GSAP Timeline Setup with Resize Listener
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/HelperFunctions/helpers/seamlessLoop.md
Sets up a GSAP timeline and attaches a resize event listener. Includes a cleanup function to remove the listener.
```javascript
function useGSAPTimeline(tl) {
const timeline = tl;
useEffect(() => {
const onResize = () => {
// Handle resize logic if needed
};
window.addEventListener("resize", onResize);
return () => window.removeEventListener("resize", onResize); // cleanup
});
return timeline;
}
```
--------------------------------
### Clamped Speed Example
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/Plugins/ScrollSmoother/index.html
Use "clamp()" to wrap a speed value to ensure elements start in their native position if they are within the viewport at the very top.
```html
```
--------------------------------
### CSS Styling for matchMedia Example
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/gsap.matchMediaRefresh().md
This CSS provides the styling for the matchMedia example, including layout, positioning, and appearance of elements like the header, lead paragraph, and the animated box.
```css
header {
flex-direction: column;
}
.lead {
padding: 0 20px;
text-align: center;
}
.gray {
width: 100%;
height: 100vh;
}
.box {
width: 150px;
height: 150px;
position: absolute;
z-index: 0;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
}
.gray p {
font-size: 1.4em;
margin: 0;
padding: 30px;
line-height: 1.4em;
}
.bottom {
width: 100%;
text-align: center;
padding: 150px 30px;
font-size: 1.2em;
box-sizing: border-box;
}
```
--------------------------------
### Get the unit of a string
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/UtilityMethods.md
Extract the unit (e.g., 'px', '%') from a string value. Example: getUnit("30px") returns "px".
```javascript
gsap.utils.getUnit("30px")
```
--------------------------------
### Morphing with shapeIndex
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/Plugins/MorphSVGPlugin.md
Use `shapeIndex` to control how points in the start shape are mapped to the end shape. This example maps the third point of the square to the first point of the star.
```javascript
gsap.to("#square", {
duration: 1,
morphSVG: { shape: "#star", shapeIndex: 3 },
});
```
--------------------------------
### ScrollTrigger.maxScroll()
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/Plugins/ScrollTrigger/static.maxScroll().md
A utility function for getting the maximum scroll value for a particular element/scroller. For example, if the element/scroller is 500px tall and contains 800px of content, maxScroll() would return 300.
```APIDOC
## ScrollTrigger.maxScroll()
### Description
Gets the maximum scroll value for a given scroller.
### Method Signature
`ScrollTrigger.maxScroll(scroller: Element | Window, horizontal: Boolean): Number`
### Parameters
#### scroller
- **Type**: `Element | Window`
- **Description**: The element whose maximum scroll should be returned.
#### horizontal
- **Type**: `Boolean`
- **Description**: If `true`, calculates the maximum horizontal scroll value; otherwise, calculates the maximum vertical scroll value (default).
### Returns
- **Type**: `Number`
- **Description**: The maximum scroll value in pixels.
```
--------------------------------
### Setting and Getting Event Callbacks
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/Timeline/eventCallback().md
Demonstrates how to set an event callback with parameters and how it's equivalent to defining it in the constructor. Also shows how to delete an event callback by setting it to null.
```APIDOC
## GSAP Timeline eventCallback()
### Description
Gets or sets an event callback like `"onComplete"`, `"onUpdate"`, `"onStart"`, `"onReverseComplete"`, `"onInterrupt"`, or `"onRepeat"` along with any parameters that should be passed to that callback. This is the same as defining the values directly in the constructor's `vars` parameter initially.
### Method
`eventCallback(type, callback, params, position)
`
### Parameters
#### Path Parameters
- **type** (string) - Required - The type of event callback (e.g., `"onComplete"`, `"onUpdate"`).
- **callback** (function | null) - Optional - The function to be called. Use `null` to delete the callback.
- **params** (Array) - Optional - An array of parameters to pass to the callback function.
- **position** (number | string) - Optional - Specifies when the callback should fire (e.g., `"start"`, `"end"`, `"center"`, `"25%"`, `1`).
### Usage Examples
#### Setting an event callback (equivalent to constructor vars):
```javascript
// Using eventCallback to set onComplete and its parameters
myAnimation.eventCallback("onComplete", myFunction, ["param1", "param2"]);
// Equivalent to:
gsap.to(obj, {
duration: 1,
x: 100,
onComplete: myFunction,
onCompleteParams: ["param1", "param2"],
});
```
#### Deleting an event callback:
```javascript
// Deletes the onUpdate callback
myAnimation.eventCallback("onUpdate", null);
```
#### Chaining multiple event callbacks:
```javascript
myAnimation.eventCallback("onComplete", completeHandler)
.eventCallback("onUpdate", updateHandler, ["param1"]);
```
### Notes
- Animation instances can only have one callback associated with each event type. Setting a new value will overwrite the old one.
- The `vars` object passed into the constructor also gets populated by these callbacks.
```
--------------------------------
### HTML Structure for matchMedia Example
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/GSAP/gsap.matchMediaRefresh().md
This HTML sets up the basic structure for the GSAP matchMedia demonstration, including a header, a box for animation, and links for information.
```html
```
--------------------------------
### JavaScript Initialization and Draggable Setup
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/Plugins/MotionPathPlugin/static.getAlignMatrix().md
Initializes GSAP plugins, selects DOM elements, applies transformations, and sets up Draggable instances for interactive elements.
```javascript
gsap.registerPlugin(Draggable, MotionPathPlugin);
let dragme = document.querySelector("#dragme"),
dot = document.querySelector("#dot"),
dotContainer = document.querySelector("#dot-container");
// apply some transforms to make it more impressive
gsap.to(dragme, {scale: 0.7, rotation: -20, y: 10, duration: 1.5});
gsap.to(dotContainer, {scale: 0.6, rotation: 25, y: 10, x: -10, duration: 1.5, delay: 1})
// make it draggable
Draggable.create([dragme, dotContainer], {onRelease: moveDot, bounds: window});
// here is where the magic is...
function moveDot() {
let matrix = MotionPathPlugin.getAlignMatrix(dot, dragme, [0.5, 0.5], [0.5, 0.5]),
// 0,0 is the origin of the alignment (the center in this case), but try any local coordinates like {x: 100, y: 70} for the bottom right corner.
dragmePoint = {x: 0, y: 0},
// convert the point into the dot's coordinate space (technically its parentNode's)
dotPoint = matrix.apply(dragmePoint);
```
--------------------------------
### onEnter Callback Example
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/Plugins/ScrollTrigger/index.html
Execute a function when the scroll position moves forward past the 'start' of the trigger. The callback receives the ScrollTrigger instance with properties like progress, direction, and isActive.
```javascript
onEnter: ({progress, direction, isActive}) => console.log(progress, direction, isActive)
```
--------------------------------
### Get Scroll Velocity
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/Plugins/ScrollTrigger/getVelocity().md
This example demonstrates how to use the getVelocity() method within the onUpdate callback of a ScrollTrigger instance. It logs the scroll velocity to the console whenever the scroll position changes.
```javascript
ScrollTrigger.create({
trigger: ".trigger",
start: "top center",
end: "+=500",
onUpdate: (self) => console.log("velocity:", self.getVelocity()),
});
```
--------------------------------
### SVG Path String to RawPath Example
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/Plugins/MorphSVGPlugin/static.stringToRawPath.md
Demonstrates how an SVG path with multiple segments is converted into a RawPath array. Each inner array in the RawPath corresponds to a segment starting with an 'M' command in the SVG data.
```html
```
```json
[
[0, 0, 10, 20, 15, 30, 5, 18],
[0, 100, 50, 120, 80, 110, 100, 100],
];
```
--------------------------------
### HTML Structure for Flip.fit() Example
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/Plugins/Flip/static.fit().md
This HTML sets up a button to trigger the animation and defines the elements that will be animated: a target container and child elements.
```html
```
--------------------------------
### Logging ScrollSmoother Velocity on Button Click
Source: https://github.com/itziklerner-pag/gsap-docs-v3/blob/main/Plugins/ScrollSmoother/getVelocity().html
This example demonstrates how to get and log the scroll velocity of an existing ScrollSmoother instance when a button is clicked. Ensure the 'smoother' variable holds a valid ScrollSmoother instance.
```javascript
let smoother = ScrollSmoother.create({...});
button.addEventListener("click", () => {
console.log("velocity:", smoother.getVelocity());
});
```