Create a Looping Tween Motion with Svelte

Instructor: [0:00] Let's create a new component called Ego. Inside of this component, we will define a few properties that we want to be available to anyone using this component. We can create props by using the export keyword inside of the script area.

[0:13] The props we want are scale, scale to, and repeat. We will set the default value of for repeat. We will create an internal state called original scale, which will be equal to $scale. The dollar sign means that this is a store that we are subscribing to.

[0:32] Let's create an async function called animate, which is where we will set up our animation from one state to another. Let's add scale.set with the scale to property as its value.

[0:45] Now, let's do the same for the original scale. Because the Svelt motion packages are built on top of the Svelt store, we can add await before the first scale.set to be sure that it is completed before starting the next animation.

[0:57] Create an image tag with a source. In our case, we're using ego from egghead@io. Add an inline start tag onto the image with a transform property with a scale value. Let's also add an alt tag for accessibility reasons.

[1:12] Inside the scale function, we can make reference to the scale property while using the dollar sign, so that we are subscribed to its value. Back in our app.svelte file, let's import tweened from the svelte motion module.

[1:25] Create the variable called scale and assign it tweened with a value of .75 for a duration of 1,000 milliseconds. Now, import ego from the ego.svelte file. We can use the component inside of the file by writing the ego tag with a scale that we will write in a shorthand format, since the variable name is the same as the prop name, and the scale too of 1.25.

[1:49] Nothing happens at the moment, but we can open the ego.svelte file and call the animate function right after where we defined it. You now see an animation happening once. Now, let's write some code to repeat the animation.

[2:02] Create a new file called utils.js. Inside this file, let's export the function called repeat check that takes a function as its first argument, and an integer called times as its second argument. We want to cater for an infinite loop, so let's set up an if statement to capture this.

[2:20] If times is equal to minus one, then we do an infinite loop. Otherwise, we create a finite loop based on the times argument. We'll use a while statement to create our finite loop. Let I = while I++ is less than the times. Now, we run our callback function.

[2:41] We can test that this is working by opening our ego.svelte file and importing our repeat check from utils. Then we can replace the animate function with repeat check, animate being the first property and repeat as its second property.

[2:56] We can check that this is working by opening the app.svelte and changing the value of the repeat property to three. Now, we should see the animation happening three times. Let's reset the value of the repeat property back to minus one, so we can move on to create in our infinite loop.

[3:12] Back inside of our util.js file, we'll create a set interval that will take the callback as its first argument and we'll set a delay of 2,000 milliseconds. We can now see our animation is animating in the infinite loop. This code, however, could cause a memory leak, because we aren't clearing the interval after the component has been unmounted.

[3:33] We can fix this by importing the onDestroy from the Svelte library. Now, we'll assign the interval to a variable called interval. Then we call the onDestroy function and as its value, we pass it an arrow function with a clear interval with interval as its value. Now we can see our animation is working as it was before.