Lottie-web: playSegments + loop : currentFrame shift to 0 after segment's completed

[sebvct14]

Hi !

So I have an issue about the playSegments method.
I want the animation to play a certain part and then loop on another part, example on this codepen :
https://codepen.io/airnan/pen/RawvLB

This works just fine, however here is my problem :
I want to get the currentFrame every frame (using onEnterFrame) to play my animation backward once the mouse leave the animation div.
I succeded to save the currentFrame but it shift to 0 every time a segment is complete.

For example if I do :

anim.playSegments([[0,30],[30,40], true];

anim.onEnterFrame = fSaveFrame;

function fSaveFrame() {
    curFrame = anim.currentFrame;
    console.log(curFrame);
}

After the [0,30] part is complete, curFrame will shift to 0 & display from 0 to 10 for the [30,40] part.

Because of that i'm not able to get the right frame and play my animation backward in a smooth way.
Is there a way to get the right frame in the anim ? (I already tried currentRawFrame which displays the same thing)
Or maybe a way to know which segment is playing ?

Thanks a lot,
Sebastien

[bodymovin]

Can you use the firstFrame property of the animation instance to check what is the current absolute time?

[Eklor]

I have the same issue, and I don't understand your answer.
How do I get the actual value of the frame that I'm seeing displayed? (current frame of the whole animation)

Thanks in advance.
Phil

[OpticNectar]

I'm having this issue too. Basically if the animation is 100 frames and I play a segment of 20-30. It says that frame 20 is 0 when you get the current frame.

[Eklor]

Yeah it's making non-sens it works this way, at least to me which come from Design and see animation like a continuous timeline, but maybe it does make sens on a coder perspective.
I had give up on a interaction I wanted to do because of this issue, since nobody can give a clear answer to why it's working that way and how to call the actual currentFrame related to the whole animation rather than the one for segment played.

[bodymovin]

If it used the absolute value of the frame, you would have the property currentFrame larger than totalFrames, so you wouldn't be able to calculate percentage of progress of the animation easily.
It's more common to use the relative value than the absolute one when animating a segment, but of course there are valid reasons for both cases.
If you need the absolute value you can do anim.firstFrame + event.currentFrame

[Eklor]

Thanks for the reply Bodymovin.

But totalFrames = the total amount of frames of my exported animation right?
How currentFrame of any segment could be ever higher than that?
And firstFrame = what exactly, if not 1?

In the end might just all come down to a wording issue.

[bodymovin]

totalFrames and firstFrame are related to the work area selected in AE, which is not the same than the composition duration in AE.
totalFrames is the amount of frames in AE work area.
There is no concept associated to total amount of frames since a timeline is virtually endless and you can change the work area.
firstFrame is the first frame of the work area selected in AE which doesn't necessarily is always 1

[Eklor]

I understand better now thank you, it's like getting out of the closed context of AE composition and having a broader way to interact with the layers. It was hard to visualise at first for my designer formated view, do you plan on working on more documentation on how to use this tool?
I think for instance completing the wiki for every single code elements (events, methods, ...) including what they refer to and some usage exemples? That would really help people like me.
Thanks again for your work and your help! The tool is awesome!

[bodymovin]

Yes, more documentation would be helpful, whenever I can, I'll add more.
PR are always welcome too :)

[appeye]

Hey, amazing tool, I'm having lots of fun with this. I did run into this issue aswell though, with frames shifting. I have a long animation with a bunch of segments that i trigger with clicks. when clicking i want to play segment, click again, play same segment reversed, and when finished, return to the very first frame of the animation (not the segment). Something like this:

f0
click
[f10-f20], stop
click
[f20-f10], f0 // my issue is here, how to go from f10(first frame of sequence) to f0(first of animation).

I figured it would jump back to the beginning with anim.goToAndStop(0) but haven't managed to get it right. Is there some way to simply render the first frame (img_001, I'm working with images)?

Whenever you have time, take care :)

[UstymUkhman]

I had the same issue: on mouse over I needed to play the first N frames and on click the remaining ones 'till the animation ends. The problem is that after the animation ends, it would take me back to frame N + 1. With animation.getDuration(true) I saw that first N frames was actually cut away from the original animation.

The only way I figured out how to solve this, is with an hack that reloads the original animation every time it ends (example from a Vue component):

  mounted () {
    this.createAnimation()
  },

  methods: {
    onMouseOver () {
      this.animation.playSegments([[0, 4]], true)
    },

    onClick () {
      this.animation.playSegments([[4, this.totalFrames]], true)
      this.animationStarted = true
    },

    onMouseOut () {
      if (!this.animationStarted) {
        this.animation.stop()
      }
    },

    createAnimation () {
      this.animation = lottie.loadAnimation({
        container: this.$refs.container,
        animationData: this.data,

        autoplay: false,
        renderer: 'svg',
        loop: false
      })

      this.animation.addEventListener('complete', this.onAnimationComplete.bind(this))
      this.totalFrames = this.animation.getDuration(true)
    },

    onAnimationComplete () {
      if (this.animationStarted) {
        this.animationStarted = false
        this.animation.destroy()
        this.createAnimation()
      }
    }
  }

[appeye]

Ah, thank u UstymUkhman. I will try this solution also. I managed to solve my issue by making the two first frames identical and then do like this:
anim.playSegments([[20-10],[1-0]], true);

a bit odd but it seems to do the job.

[bitknitter]

I got a similar problem with looped segments. It seems that when the playSegments loop ends, it gets set back to the first frame of the loop before loopComplete gets fired. Checked by logging the current frame and the loopComplete event.

This is making problems. I got a walking animation with a looped walk sequence. When it ends, it should play a special segment to go into stand. But when the loopComplete gets fired, the scene has already been set back to its first frame so the character jumps back before stopping his movement.

I found no way to get around this.