Easing on ScrollTrigger animations for scrub: true

[jordanklaers]

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 July 1, 2021 by jordanklaers
got closer to identifying a solution but not fully

[OSUblake]

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?

 

Quote

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.

 

[jordanklaers]

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(proxy, 1, { value: 1 })

        ]

 

        //okay now add the actual animation

        this.animationTimelines[0]

            .fromTo('#bio-container .bio-animation-wrapper',

                { opacity: 1, rotationX: 0, scale: 1, y: 0, z: 0, transformOrigin: "50% 50% -100px" },

                {  opacity: 1, rotationX: 90, y: 100, z: -100, duration: 0.5 })

            .fromTo('#bio-container .bio-animation-wrapper',

                { height: '160' },

                { height: '0px' },

                '-=.5')