Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Applying Multiple Easing Effects

Applying Multiple Easing Effects

In the Custom Ease In/Ease Out dialog box, the Use One Setting for All Properties option is the default option. However, you have the option to control each object’s properties independently by deselecting this option. When you do so, the Property pop-up menu becomes enabled and provides a separate velocity curve for each of the symbol properties listed.

The following list describes the properties that appear in the in the Property pop-up menu and how each one affects the velocity curve:

  • Position affects the position of the animated symbol through the motion tweening
  • Rotation affects the rotation of the animated symbol, such as the sample in Figure 3
  • Scale affects the size of the animated symbol
  • Color specifies the ease settings for color transitions applied to the animated instance
  • Filters affects the filters applied to the animated symbol

When you create a velocity curve for each symbol property, you are applying a multiple easing effect on one symbol. In the following example, you will see how to apply a different easing setting for the Position and Filters properties of a star instance.

Play the following demo to see the star animation with two easing settings (Position and Filters property) applied to it, as shown in Figures 7 and 8:

The velocity curve in Figure 7 shows the easing setting for the position of the star throughout the motion tweening.

Easing setting for the Position property of the animated star

Figure 7. Easing setting for the Position property of the animated star

The velocity curve in Figure 8 shows the easing setting for the Blur filter applied to the star throughout the motion tweening.

Easing setting for the Blur filter applied to the animated star

Figure 8. Easing setting for the Blur filter applied to the animated star

In the next example, a bouncing ball as seen from the top, I have applied a different easing setting to the Scale and Filters velocity curves (Figures 9 and 10).

Play the following demo to see the bouncing ball animation with two different easing settings for the Scale property and Blur filter:

The Scale setting (see Figure 9) creates the bouncing-ball effect, while the Filters setting (see Figure 10) creates the blur at the end of the animation.

Easing setting for the Scale property applied on the bouncing ball animations

Figure 9. Easing setting for the Scale property applied on the bouncing ball animations

Easing setting for the Blur filter applied to the bouncing ball animation

Figure 10. Easing setting for the Blur filter applied to the bouncing ball animation

Comments