Jump to content
Search Community

Easing on ScrollTrigger animations for scrub: true

jordanklaers test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

I am sorry if this comes off as a "How do I make X?" but im looking for very specific help.

I am copying the type of animation found on this website here: https://iuri.is/
Specifically the text that gets centered on the screen.
I have nearly everything figured out except one specific characteristic of the animation. When scrolling a single tick, the animation for the text seems to animation from its current position to the state that corresponds to the value of the scroll bar in such a way that there is a delay. You scroll one notch, then a brief moment later (~0.5s) the text eases slowly into the position. 
I see on the website, an older version of scrollTrigger is used and I also see when looking at the source code, there is use of the onUpdate method which contains a value for easing.

.eventCallback('onUpdate', event => {
    TweenLite.to(this.timeLines[i], .5, {
        progress: this.tweeners[i].progress(),
        ease: Power0.easeNone

I have tried snap but that just slowly moves to the nearest increment after the jolt into position from scrolling.
How can I apply the easing function to the transition between its current position, and the new position after scrolling stops? as opposed to the ease function applying to the full value change set in the .fromTo()

I see this is applied somehow by  using the onUpdate callback with a TweenLite.to implementing the progress field but im having trouble with the way the timeline needs to be set using this approach (code pen updated along with this update to the post)

If its unclear what im specifically referring to I can try to record my screen to point out what im observing


See the Pen yLbyWgX?editors=1111 by jordanklaers (@jordanklaers) on CodePen

Edited by jordanklaers
got closer to identifying a solution but not fully
Link to comment
Share on other sites

  • Solution

Hi jordanklaers!


2 hours ago, jordanklaers said:

.eventCallback('onUpdate', event => {
    TweenLite.to(this.timeLines[i], .5, {
        progress: this.tweeners[i].progress(),
        ease: Power0.easeNone


There is no old version of ScrollTrigger. More like ScrollMagic. 😉


And it's hard to tell what the code is even doing. Probably some type of proxy animation.


Have you tried using a number value for scrub?


scrub Boolean | Number - Links the progress of the animation directly to the scrollbar so it acts like a scrubber. You can apply smoothing so that it takes a little time for the playhead to catch up with the scrollbar's position! It can be any of the following
  • Boolean - scrub: true links the animation's progress directly to the ScrollTrigger's progress.
  • Number - The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out.


  • Like 1
Link to comment
Share on other sites

I just laughed out loud at the ridiculousness of my oversight. Scrub with a number is literally exactly what I was looking for. Thats embarrassing. I even ended up implementing a solution similar to the one I was looking at from that site. 

Inside the mounted function in my vue app I had this code: (didnt think I needed to add to a codepen since its convoluted and your suggestion accomplishes the same thing easier)


const proxy = { value: 0 };
        this.animationTimelines = [
            new gsap.TimelineMax({
                paused: true,
                ease: gsap.Power3.easeOut,
                onUpdate: () => {
                    console.log('Real update');
        const that = this;
        this.scrollTriggers = [
            new gsap.TimelineMax({
                scrollTrigger: {
                    trigger: "#bio",
                    scrub: true,
                    start: "top top",
                    end: "bottom top"
                onUpdate: () => {
                    console.log('psuedo update');
                    let unrefinedProgress = that.scrollTriggers[0].progress()
                    let currentProgress = unrefinedProgress.toFixed(6);
                    gsap.TweenLite.to(that.animationTimelines[0], 0.8, {
                        progress: currentProgress,
                        ease: gsap.Power3.easeOut
            .to(proxy1, { value: 1 })
        //okay now add the actual animation
            .fromTo('#bio-container .bio-animation-wrapper',
                { opacity: 1rotationX: 0scale: 1y: 0z: 0transformOrigin: "50% 50% -100px" },
                {  opacity: 1rotationX: 90y: 100z: -100duration: 0.5 })
            .fromTo('#bio-container .bio-animation-wrapper',
                { height: '160' },
                { height: '0px' },
  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...