How to transition animations smoothly?

Questions
,
1

In the video I’ve shared, if you go back and forth repeatedly between the timestamps 0 - 0.5 you’ll see the issue I’m having.

Why does it jump back in position when going from animation 1 to animation 2?

Some additional information:
These animations are set to trigger on page scroll. In one section the first animation plays, in the other section the second animation plays.

2

Please provide more information and ideally a codepen/js fiddle with a minimal reproduction of the issue.
There are many possible reasons for this.
First, have you checked your animation works correctly by dropping your model into GLTF viewer ?
If it works as expected in there, then the issue is how you’re managing the state of your application. For example, maybe when you load the page, you add the model to the scene at certain coordinates. Then at some point you turn on your animation, and at its first frame it moves the model to a different position than the one it already has.

3

Are u using tween, animejs?
How your animation start?
For animation while scrolling, I used this information
https://sbcode.net/threejs/animate-on-scroll/
but while scrolling, my scene moves a bit jerkily. In order to do something similar to transition, I did the following:

        const animationScripts = [{ start:0, end:0, func:0 }]
        // ANIMATE
        function lerp(x, y, a) {return (1 - a) * x + a * y}
        // Used to fit the lerps to start and end at specific scrolling percentages
        function scalePercent(start, end) {
            oldScrollPercent=parseFloat(oldScrollPercent.toFixed(2))
            scrollPercent=parseFloat(scrollPercent.toFixed(2))
            if(parseFloat((oldScrollPercent)-(scrollPercent))>0){
                oldScrollPercent-=.04
            }
            if((oldScrollPercent)<(scrollPercent)){
                oldScrollPercent+=.04
            }
            if(scrollPercent>screenConst*5-.1){// we scrolled to end
                oldScrollPercent-=.04
            }
            return (oldScrollPercent - start) / (end - start)
        };
        let scrollPercent =0, oldScrollPercent = 0
        pl=()=>{
            if(oldScrollPercent<scrollPercent){}
            animationScripts.forEach(a=>{
                if (oldScrollPercent >= a.start && oldScrollPercent < a.end) {
                    a.func()
                }
            })
        }

Thus, I add some kind of transition to the animation while scrolling.

4

This example is one way to transition between two animation clips…

https://threejs.org/examples/?q=skin#webgl_animation_skinning_morph

… notably this section in the code: