Image sequence with canvas

[Luis Correia]

Hello,

 

I need to create an image sequence with a seamless repeat animation. I already have a structure for this sequence using the canvas element, but there seems to be an issue when the animation repeats itself. The first and last frame are displayed for half the time they should. 

 

Thanks in advance for the help.

 

 

See the Pen abeMMqG by fcppsgmz-the-selector (@fcppsgmz-the-selector) on CodePen.

[Rodrigo]

Hi,

 

I'm not 100% sure I follow what you're trying to do, but maybe you're looking for repeatDelay:

https://gsap.com/docs/v3/GSAP/gsap.to()#repeatDelay

 

Here is a fork of your demo:

See the Pen qBewBQJ by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Luis Correia]

Hi Rodrigo,

 

Thank you for your reply.
 

Maybe the example was not the best. I updated so it shows the actual images that i'll be using.

 

Your suggestion didn't fix the issue, now it adds a delay at the end and the first one is still faster.

 

Every shadow is displayed for half a second, expect the last and the first one where they are noticeably faster (about double the speed)

 

See the Pen eYqommr by fcppsgmz-the-selector (@fcppsgmz-the-selector) on CodePen.

[GreenSock]

That's just a logic thing. Once the value gets to 0.5, it would round to 1. That's why the first and last are acting differently for you. 

 

Maybe use steps() ease like this?:

See the Pen LYwvVyx?editors=0010 by GreenSock (@GreenSock) on CodePen.