Skip to main content

HelperFunctions

Over the years Jack has "whipped together" various GSAP-related helper functions for community members, so we gathered them into one place for convenience. We'll keep adding relevant helper functions here as we craft them. Enjoy!

Available Helpers

Like a slider or news ticker, where elements go off one side and then eventually come back around from the other side. This helper function does all the hard work for you

It should be as simple as setting overscroll-behavior: none in your CSS, but iOS Safari won't cooperate! So here's a function that'll help stop the overscroll behavior:

Tie a Lottie animation to the scroll position with this handy function so that as the user scrolls, the animation progresses

Feed in a ratio between -1 and 1 to any of the standard (non-configurable) eases to make them "weighted" in one direction or the other

change transformOrigin dynamically without a jump

Calculate all the progress values for the anchor points on a path so that, for example, you could use DrawSVG to animate point-by-point (requires MotionPathPlugin)

Animate between `backgroundSize` of `"cover"` or `"contain"

If you need one ease at the start of your animation, and a different one at the end, you can use this function to blend them!

"resize" events get dispatched many times while the user is dragging the browser window's edges, so if you run an expensive function on every resize event, it can really bog things down. Here's a function that will wait to call your function until a certain amount of time has elapsed since the user STOPPED resizing the window

This is a special method that you can apply via an onUpdate to make a tween render skews in the old skewType: "compensated" way from GSAP 2. Note that it affects an element's scaleX/scaleY (hence "compensated")! This assumes skews are degree-based, and only works in GSAP 3.

Snap to a value in a specified direction - greater or lesser

An ease accepts a normalized progress value (0-1) and returns the corresponding eased value, but what if you want to know when that eased value will hit a specific ratio like 0.7? For example, a `"power2.out"` ease may hit 0.7 when the linear progress is only around 0.33. This function lets you feed in that 0.7 and get the linear progress value (0.33 in this example)

If you're shifting things around in the DOM and then you want elements to animate to their new positions, the most full-featured way to handle it is with the Flip Plugin, but if you're only doing basic things you can use this helper function (see the comments at the top to learn how to use it):

Take a number like 1000.254145 and format it into a string like "1,000.25".

Labels are timeline-specific, so you can't tell a timeline to move its playhead to a label that exists in a nested timeline. So here's a helper function that lets you find a nested label and calculate where that lines up on the parent timeline

This function even takes ScrollTrigger pinning into account in most situations. Feed it your target elements and it'll return a function that you can call later, passing it a specific one of those target elements and it'll return the scroll position. It even adjusts when the viewport resizes (responsive).

Perhaps you want to scroll the page to the exact spot where a particular scroll-triggered animation starts (or ends or any progress value) - just feed this helper function your animation (it must have a ScrollTrigger of course) and optionally a progress value (0 is when the animation starts, 0.5 is halfway through, 1 is the end) and it'll return the scroll position which you could feed into a scrollTo tween

Create an Array of image URLs, feed it to this helper function along with a reference to your <canvas> object and a ScrollTrigger config object to have it scrub through those, drawing the appropriate one to the canvas.

kill all tweening elements that are children of a given target

SplitText doesn't natively support splitting nested elements by "lines", but if you really need that we've put together a helper function for it.

Randomly pluck values from an array one-by-one until they've all been plucked (almost as if when you pluck one, it's no longer available to be plucked again until ALL of them have been uniquely plucked)

Maybe you can't pre-build your entire timeline because you need to call individual functions in a sequenced fashion. Perhaps they each change the state of elements, creating an animation that must finish before the next step (function) is called. This helper function lets you organize your code quite easily into a simple sequence of arguments you pass

change transformOrigin dynamically without a jump by compensating its translation (x/y)

Most browsers pause requestAnimationFrame() calls while a browser tab is hidden in order to reduce CPU/battery drain, but if you'd like GSAP to continue to update, you can use this function

If you find yourself needing an onReverse() callback (which doesn't exist) or a way to get notified when the playhead changes direction, this is a very useful helper function.

Have more control over the numbers you pick by providing this function an ease curve of your choice!

Seamlessly loop elements along the x or y axis

Stop overscroll behavior, even on iOS Safari

Hook a Lottie animation up to ScrollTrigger

addWeightedEases

Change transformOrigin without a jump

anchorsToProgress

Animating backgroundSize:"cover" or "contain"

blendEases

Call a function after viewport resizing stops (debounced)

Compensated skews

Directional snapping

Estimate where an ease will hit a certain value

Simple FLIP

Format number with commas and limited decimal places

Find a nested label's time

Get the scroll position associated with an element (ScrollTrigger-aware)

Get the scroll position associated with a particular ScrollTriggered animation

Scrub through a canvas image sequence

killChildTweensOf

SplitText lines in nested elements

pluckRandomFrom

Step-by-step function calls progressively build timeline

Change transformOrigin without a jump

Force GSAP to update while in hidden tab

Track the playhead direction of any animation

Weighted Random