An animated circle that changes its color without stopping its animation

Hi

A red circle.
It’s bumping like a heart.

Opacity 0%
Scale 0%

1 second later

Opacity 100%
Scale 100%

1 second later

Opacity 0%
Scale 0%

I know how to add Timeline Actions to loop it.

But what I want to do, is that while the circle is bumping, a button BLUE needs to change the color of the circle to blue. The RED button changes the color of the circle to red AND, that’s the most important part, the bumping motion should never stop. So the motion of the bumping heart is independant of the buttons.

I have tried many possibilities such as creating different timelines for different instances of the circle but it seems that it is impossible to achieve it.

So I use a technique using a symbol that just changes the color of a big rectangle, and that symbol is grouped with itself to create a mask. Then the mask is animated. (See the attached file). But that does not help me in trying to achieve this by using a red object and a blue object to create the switch between them.

Let’s try this.
A symbol would contain two timelines: one for the red circle, and another one for the blue circle. Both circles/timelines have the same behaviour: they start at the same moment, the animation is the same, it’s just that they have a different color. But if I want to switch from one timeline to another timeline by clicking the button, I can’t find a solution where when we go the to the other timeline, it is read starting to the same time where it left the first timeline. Hope this is clear.

Circle_chaning_colors.zip (15.3 KB)

The simplest solution would be one element and two timelines:

  • Timeline 1 (“Pulse”): Loops and constantly animates the scale/opacity
  • Timeline 2 (“Color Change”): Animates the background color property from red to blue

Buttons:

  • Red: has action to continue timeline in reverse (therefore always animating back to red)
  • Blue: has action to continue timeline (therefore always animating forward to blue)

PulsingEllipse.hype.zip (15.0 KB)

There are a few areas this could be potentially improved depending on your needs:

  • If you want the first button click to do a fade in, then I would recommend grouping the ellipse and have another timeline that will fade it in. You can chain a continue timeline action on the button clicks. As long as it is not set to “Can Restart Timeline” it would only run once, which would be the desired result.
  • If you intend to have other colors then the single Color Change timeline won’t work. Instead add one Relative Timeline for each color change that animates to the desired color. Instead of using Continue Timeline use Start Timeline to make sure it restarts correctly.

Does that help?

1 Like

It certainly helps. You did exactly what I did in front of my clients yesterday but for a reason I don’t understand it didn’t work 100%. Thank you so much for this.

1 Like

Great, glad that’s what you were looking for. The common pitfalls are:

  • Using a start timeline instead of a continue where needed
  • Changing a value on a separate timeline while not being “on keyframe” can result in offsetting values across other timelines that might affect your animation in unintended ways