In this tutorial, you'll learn how to make infinite looping animations, such as an infinite spinning pinwheel and endlessly falling coins by using interaction triggers like "Rotated" and "Moved".
Let's take the endless rotating loop as the first example. You will need to set the interaction as follows:
Step1. Add a "Rotate" command to your target component and set the rotating angle as "0".
Step2.Select the same component again, drag the link to itself and add a "Rotated" trigger. Set a "Rotate" command for the component then and change the interaction details based on your needs.
And now you will see that component continuously rotating in the Preview mode.
Spinning Pinwheel
Let's see how you can create a spinning pinwheel:
Step1. Create the pinwheel and background on the main artboard, and name the pinwheel layer as "Pinwheel".
Step2. Create a Rotate interaction to the Pinwheel like this: Select the main artboard and click "Add interaction" on the right side to change the interaction settings as below:
(Note: Select the main artboard, not the component inside the main-artboard, to get going. If you don't know how to select the main artboard, try to click the artboard name.
- Target: Pinwheel
- Triggers: On load
- Commands: Rotate
- Angle: 0° (Changes the angle based on your needs)
- Easing: None (Changes the easing based on your needs)
- Duration: 0 (Changes the duration based on your needs)
- Delay: 0 (Changes the delay based on your needs)
Step3. Create another Rotate interaction with a "Rotated" trigger.
Select the Pinwheel, drag the interaction node to itself, and change the settings as below:
- Target: Itself
- Triggers: Rotated
- Commands: Rotate
- Angle: 360° (Changes the angle based on your needs)
- Easing: Linear (Changes the easing based on your needs)
- Duration: 1200ms (Changes the duration based on your needs)
- Delay: 0ms (Changes the delay based on your needs)
And now, you've created a pinwheel that will automatically spin.
Falling Coins
Let's see how you can create a spinning pinwheel:
Now let's see how to create endlessly falling coins:
Step1.Make all coins and sceneries on the main artboard. Group all coins and name the group as "Coins".
Step2. Create a Move interaction to move the coins to the target position of the falling like this: Select the main artboard and click "Add interaction" on the right side to change the interaction setting as below:
(Note: Select the main artboard, not the component inside the main-artboard, to get going. If you don't know how to select the main artboard, try to click the artboard name.)
- Target: Coins
- Triggers: On load
- Commands: Move
- X: 0px (Changes the angle based on your needs)
- Y: 1112px (Changes the option based on your needs)
- Easing: Ease in (Changes the easing based on your needs)
- Duration: 1200ms (Changes the duration based on your needs)
- Delay: 0 (Changes the delay based on your needs)
Step3. Make another Move interaction to move the coins back to its start position like this: Select Coins, drag the interaction node to itself, and change the settings as below:
- Target: Itself
- Triggers: Moved
- Commands: Move
- X: 0px (Changes the angle based on your needs)
- Y: -1112px (Changes the option based on your needs)
- Easing: None (Changes the easing based on your needs)
- Duration: 0ms (Changes the duration based on your needs)
- Delay: 0ms (Changes the delay based on your needs)
Step4. Add one more Move interaction to move the coins back to its target position again like this:
Select Coins, drag the interaction node to itself again, and change the settings as below:
- Target: Itself
- Triggers: Moved
- Commands: Move
- X: 0px (Changes the angle based on your needs)
- Y: 1112px (Changes the option based on your needs)
- Easing: Ease in (Changes the easing based on your needs)
- Duration: 1200ms (Changes the duration based on your needs)
- Delay: 0ms (Changes the delay based on your needs)
And now, you've done with continuously falling coins.