How to play animation not circular (animate with scroll)

Questions
#1

Hi, I’m making scroll base animate for camera and I got a question of this

The question is “Is it possible to set animatoin not circular?”

I made function that playing animation with scroll, and it work well but, sometimes if I scroll down it will go first frame of animation(like overflow) and If i scroll top it goes last frame of animation (like underflow)

this is part of my code

document.body.onscroll = () => {
    // calculate the current scroll progress as a percentage

    scrollPercent =
      ((document.documentElement.scrollTop || document.body.scrollTop) /
        ((document.documentElement.scrollHeight || document.body.scrollHeight) -
          document.documentElement.clientHeight)) *
      100;

    const delta = (scrollPercent - lastPersent) * secPerScrollpersent;
    lastPersent = scrollPercent;

    cameraMixer.mixer.update(delta);

    // (document.getElementById('scrollProgress') as HTMLDivElement).innerText =
    //   'Scroll Progress : ' + scrollPercent.toFixed(2);
  };

what I have to set about animation for not play animation circular? I tried THREE.LoopOnce but not work

thanks!

#2

do you got a solution of it?

#3

people discussed about this at AnimationAction wrapping on time === duration · Issue #24609 · mrdoob/three.js · GitHub

But didn’t merged yet.

So I have to use it with some margin value(like maxTime - 0.05)

#4

Do you have some code example, like I’m facing issue when I’m scrolling down my animation stop at last frame but scrolling further down its starts again and while scrolling up its stop at last frame but suddenly after scrolling up further its jump to animation last frame while it have to stop on first frame as I’m playing it in reverse . Could you relate it with your issue is that same you faced?

#5

Now I’m doing my company project. So I can show you only part of it…

But it is not hard! I just stop update animation when it nears max time.

if (mixer.time + delta >= 0 &&mixer.time + delta <=MaxTime - 0.05) 
child.mixer.update(delta);

And maxTime can get in AnimationClip.

maxTime = clipAni.getClip().tracks[0].times[clipAni.getClip().tracks[0].times.length - 1],
#6

bro can we call on google meet?
if you won’t mind explaining animation logic to me?

#7

my main language is not english, and I’m not a real expert in three js. But still if you don’t mind we can:)

#8

Hi @aswwwcom did you try to use gsap on this ?

#9

its okay, lets have a call

#10

I tried but its not working properly

#11

yep I used with gsap scroll trigger