How to animate not complete colour fade from left to right and reverse?

[damianb39139878]

Hi guys,

I'm going to start with that animation is new to me, however I've been tasked to do an animation very similar to the one found here: http://tinypic.com/r/11qsks4/9

Please mainly focus on animation from 00:18 when the car is fading from left to right with a triangle underneath as a mark point. Please then jump to 00:49 and there's the same effect but it's reversed.

How can I achieve those effects? I tried to look for an answer for few hours now but can't find anything that could help me.

Is there anyone who could help with that?

P.S. I'm using Adobe Animate CC 2018

P.S.2 Here's where I'm at:

So basically I would like to know how to fade the colour of the motorcycle with the same speed as the triangle and how to reverse it in animation

[Colin Holgate · Accepted solution]

If you add the grayscale version of the motorbike in a layer on top of the color one, then add a shape in a layer on top of the grayscale layer, you can set the shape layer to be Mask. In the first frame of that layer, make the shape be to the left of the motorbike, and in a later frame of that layer add a keyframe, and make the shape be wide enough to reach the arrow. Now right-click in the difference frames of the shape layer, and choose Shape Tween.

The arrow layer would have a similar Classic or Motion tween to make it keep up with the shape tween.

I can see that you're doing HTML5 Canvas, so I made this example file:

http://colin.scienceninja.com/colorbike-canvas.zip

You can see it working here:

colorbike-canvas