lesson 3.10.4 animating properties
Bring your drawings to life by making them spin, grow, shrink, and change colour!
You have already made your character move, but what about making it grow, shrink, spin, or even fade like a ghost? Today, you'll become a more advanced Creative Technologist by learning to animate different properties of your character. These skills are essential for Animators and Motion Graphics Designers who need to create eye-catching and expressive movements in everything from cartoons to video games.
Learning Outcomes
The Building Blocks (Factual Knowledge)
Recall the purpose of a keyframe as a marker for the start and end of a transition.
Describe the difference between animating an object's position, its scale, and its rotation.
Apply keyframes to multiple properties on a single timeline to create a combined animation.
The Connections and Theories (Conceptual Knowledge)
Describe how tweening is used to animate an object's properties over time, not just its location.
Explain how animating multiple properties simultaneously creates more complex and visually interesting movement.
Analyse a professional animation to identify where changes in scale, rotation, or colour are used to convey emotion or action.
The Skills and Methods (Procedural Outcomes)
Create a tweened animation that changes an object's size (scale) over a set number of frames.
Create a tweened animation that changes an object's angle (rotation) over time.
Create a tweened animation that changes an object's transparency (opacity) to make it fade in or out.
Digital Skill Focus: This lesson, you will focus on creating a multi-layered digital animation, managing a timeline and object properties to produce a cohesive animated sequence.
Beyond Movement: Animating Properties
In the last lesson, you created a motion tween to change your character's position. You told the software where the character started and where it ended, and the computer did the hard work of drawing all the frames in between.
However, great animation is more than just sliding things around the screen. Animators make characters and objects feel alive by changing their size, rotation, and even their colour or transparency. These are all properties that you can control with keyframes.
Scale: This refers to the size of your object. By animating the scale, you can make a character appear to grow larger (move towards the camera) or shrink (move away).
Rotation: This is the angle of your object. You can make an object spin, tilt, or wobble by animating its rotation.
Opacity: This is how transparent an object is. Animating opacity from 100% down to 0% makes an object fade out.
Just like with position, you only need to set a keyframe for the property's start value and a keyframe for its end value.
Turn these words into pictures! Draw 3 small doodles, icons, or emojis that sum up the main ideas that you've read. You don't need to be an artist - making it visual helps your brain remember!
Task 1 The Beating Heart
Let's create a classic animation effect: a beating heart. This will teach you how to use multiple keyframes to create a looping 'pulse' by animating the scale property.
1
Draw your Heart
In a new Wick Editor project, use the Ellipse tool to draw a circle.
Switch to the Path Cursor tool (the white arrow).
Click and drag the points of the circle to transform it into a heart shape.
Use the Inspector to give it a red Fill colour.
2
Set the Keyframes
Click on Frame 1 in the timeline. Click the 'Add Tween' button in the Inspector. This adds a tween with keyframes at the start and end.
By default, the tween will be 12 frames long. Drag the right edge of the tween on the timeline so it ends at Frame 24.
Now, click in the middle of the tween, at Frame 12. Click the 'Add Keyframe' button in the Inspector. You should now have three diamonds on your timeline.
3
Create the 'Beat'
Make sure your playhead is on the middle keyframe (Frame 12).
Select your heart on the canvas.
Hold down the Shift key and use the corner handles of the blue box to make the heart about 50% bigger.
The first and last keyframes have the heart at its normal size, and the middle one has it at its biggest size.
4
Test it!
Click the Play button. The heart should now appear to 'beat' in a perfect loop!
Outcome: You will have a smoothly looping animation of a heart pulsing, created by tweening the scale property across three keyframes.
Time to Rotate
You've mastered scale, now let's add some spin. Animating the rotation property works in exactly the same way. You set a start angle and an end angle, and the Wick Editor tweens between them. The rotation is measured in degrees, from 0 to 360.
This is a powerful tool for animators. A slight head tilt can show curiosity, while a full 360-degree spin can be used for a dramatic attack or a happy dance. By combining rotation with the scale animation you just created, you can start to build up very complex and professional-looking movements.
Boil this entire section down to exactly three bullet points. What are the absolute, unmissable facts you need to take away today?
```
```
Task 2 Spin to Win!
Let's build a spinning wheel, like you'd see on a car or a bike. This task will combine your shape-building skills with a rotation tween.
1
Build the Wheel
Create a New Layer in your project so you don't disturb your heart animation.
Draw a large black circle. Then, draw a smaller white circle perfectly in the middle of it.
Select both circles. In the Inspector, find the path operations and click 'Subtract'. This will cut out the middle and create a tyre!
Draw a very small black circle in the centre for the hub.
Use the Line tool to draw some spokes from the hub to the tyre.
Finally, select all the parts of your wheel and press Ctrl + G to Group them.
2
Add the Rotation Tween
With your grouped wheel selected, click 'Add Tween' in the Inspector.
Drag the end of the tween to Frame 24.
Add another keyframe at 24.
Make sure the playhead is on the first keyframe and click the keyframe on the timeline. Check in the Inspector that the 'Full Rotation' value is set to
13
Play and Observe
Play your animation. Your wheel should now complete one full spin!.
Role: Act as a friendly computing expert for a Key Stage 3 student. Task: Explain the difference between animating scale and animating rotation in a tweened animation. Length: Maximum 100 words. Audience: 12-year-old student. Tone: Simple, encouraging, and use an analogy. Constraints: Use a bulleted list for the two definitions. NO intro, NO outro, NO deviation from the topic, NO follow-up questions.
Outcome: You will have a grouped vector wheel that completes a smooth 360-degree rotation over 24 frames.
Fading (and Colouring)
The final property we will look at today is opacity. Opacity is a measure of how see-through an object is. 100% opacity is a solid object, and 0% opacity is completely invisible. By tweening this property, you can make characters fade in, fade out, or look like ghosts.
In the Wick Editor, the property is called 'Opacity' and it's a value from 1 (fully visible) to 0 (fully invisible).
You can also tween an object's colour by setting a 'Fill Color' at the start keyframe and a different one at the end keyframe. The software will blend between the two colours over time. This is a great way to show a character blushing, powering up, or changing mood.
Become the Quiz Master! Write down three really tricky multiple-choice questions based on these notes. Make the wrong answers sound plausible to try and catch out your classmates.
```
```
Task 3 Now You See Me...
For our final trick, let's create a spooky ghost that fades in and out of sight! This animation uses the opacity property.
1
Draw your Ghost
On a new layer, draw a simple ghost character. An easy way is to start with a white ellipse, use the Path Cursor to make the bottom wavy, and add two black circles for eyes.
Don't forget to Group all the parts together!
2
Set up the Vanishing Tween
Add a tween to your ghost clip and stretch it to Frame 24.
Add a keyframe in the middle, at Frame 12.
At the start (Frame 1) and end (Frame 24) keyframes, make sure the 'Opacity' property in the Inspector is set to
13
The Disappearance
Now, move the playhead to the middle keyframe (Frame 12).
In the Inspector, change the 'Opacity' value to
04
Witness the Haunting!
Play your animation. The ghost should now smoothly fade away and then reappear, creating a perfect spooky loop.
5
Challenge: The Psychedelic Discoball
Wick Editor doesn't let you tween colours directly. Can you think of a clever way to simulate a colour change?
Hint: What if you had two different coloured objects in the same spot on different layers, and you made the top one fade out...?
Outcome: You will have a looping animation where your ghost fades in and out, and you will have investigated how to solve problems like animating colour.
Hungry for more?
Combine and Conquer: Create a new animation where an object scales, rotates, and fades all at the same time. This is how professional animators build up complex movements.
The Bouncing Ball: Try to create a convincing animation of a bouncing ball. You will need to use position tweens, but also scale tweens to create a 'squash and stretch' effect as it hits the ground. Search for tips on the '12 Principles of Animation' to help you.
Explore Other Properties: Look through the Inspector in the Wick Editor. What other properties can you tween? Experiment with things like 'Stroke Color' or 'Stroke Width' to see what effects you can create.
Out of Lesson Learning
Last modified: June 15th, 2026
