30(ish) Clicks — No. 1

30(ish) Clicks — No. 2

30(ish) Clicks — No. 3

30(ish) Clicks — No. 4

30(ish) Clicks — No. 5

30(ish) Clicks — No. 6

30(ish) Clicks — No. 7

30(ish) Clicks

Create a looping wave animation with just 30(ish) clicks. 

Link certain properties between two effects–Wave Warp and Current Time–to bring your motion design to life.

Want to learn more about the effects/behaviors in this chapter? 

*If your interface looks a bit different throughout this series, don’t worry. We’re constantly improving the platform and deploying new features. If the changes make this tutorial difficult reach out, we're happy to help.

Create a looping wave animation with just 30(ish) clicks. 

Link certain properties between two effects–Wave Warp and Current Time–to bring your motion design to life.

Want to learn more about the effects/behaviors in this chapter? 

Check out Wave Warp and Current Time.

*If your interface looks a bit different throughout this series, don’t worry. We’re constantly improving the platform and deploying new features. If the changes make this tutorial difficult reach out, we're happy to help.

Hello Fablers, welcome back to Fable Academy's 30(ish) Clicks video series, where we show you how to make cool motion design inside of Fable with as few clicks as possible. Let's dive right in.

For this one, we're going to create something along the lines of this sort of Stripe wave animation.

To get started, we've got our new project.

We're going to set our background color to #0D0D0D, our canvas set at 1920 by 1080. Frame rate is set at 30, have a duration of five seconds.

To get started, let's grab our rectangle shape tool and draw a wide rectangle. We'll then use our tools here in the top right, to align to the center vertically and horizontally.

Let's keep our project structure nice and organized, and we'll call this main stripe.

Select our layer, control D, make our second stripe. Then let's just push this up a little bit. We'll use our shift and our up arrow. Control D again, to duplicate our stripe one more time, and then shift and down arrow to move it down south.

Changed our names a little bit and a little bit easier. We'll just call them stripe one and two, and main stripe.

Once we have our three stripes, let's select all three of them. Hit control G, we're going to group them, let's name this stripes.

Then let's go up here to our top right effects panel. Scroll down or use a search bar and we're going to select our wave warp effect.

Drag and drop that onto our group of stripes. We're going to set our rotation to 90. And our width to 200.

Go back up to the effects panel. Scroll down to our utility section. We're going to select the one called current time.

Let's set our timescale to five since this is a five second animation. Then we're going to click and select this little circle here to the left of our property. We're going to drag and connect it to our movement property of the wave warp.

We press play. We'll see that we now have procedural animation being driven by the current time.

Next let's just make some little adjustments here. These numbers can be a bit arbitrary, but for me, The numbers that worked are 273.4 on the width and 45.3 on the height.

Replace these, I put them in the wrong place.

Now, when you hit play, you should have a perfectly looping animation. So in about 19 to 20 clicks, you have a great looking little GIF animation. Can't wait to see you in the next one.

30(ish) Clicks — No. 1

About This Lesson