HOW TO: Use Easing Functions

community

#1

You can add more info to overlay animations (check out this guide on overlays right here: A Guide to Using & Animating OVERLAYS ) by using easing functions which can help to make the movement seem more “natural”.

According to the Episode Guides, they’re subtle, and sometimes it may be hard to spot the difference of these easing functions when comparing two overlays side by side, but if you look closely, you should be able to see it ^^

Here’s an example I wrote up, using an overlay from Episode (duplicating it) and showing some easing functions compared to moving it regularly by shifting it.

NOTES:
Background used: EXT. LA SKATE PARK - DAY
Overlay used: CAR ANGLE VINTAGE
Duplicate Overlay used: CAR ANGLE VINTAGE_2
(You don’t need to upload any of them as they come from Episode itself)

ANYWAYS, ENOUGH TALK, HERE’S THE EXAMPLE (GO TEST IT AND SEE WHAT THE EASING FUNCTIONS ARE LIKE, srsly just copy and paste it, that’s all):

label easing

EXT. LA SKATE PARK - DAY

@zoom reset

@overlay CAR ANGLE VINTAGE create
@overlay CAR ANGLE VINTAGE scales to 0.15 0.15
@overlay CAR ANGLE VINTAGE shifts to 120 380
@overlay CAR ANGLE VINTAGE opacity 1

@overlay CAR ANGLE VINTAGE_2 create from CAR ANGLE VINTAGE

@overlay CAR ANGLE VINTAGE_2 scales to 0.15 0.15
@overlay CAR ANGLE VINTAGE_2 shifts to 120 270
@overlay CAR ANGLE VINTAGE_2 opacity 1

NARR
Welcome to a short tutorial on Easing functions.
By default, all easing functions are ‘linear’.
You don’t even need to write “using linear” at the end because whether you add it or not, it’s moving in a straight line.
Here’s an example of both cars moving at the same pace and in one direction:

&overlay CAR ANGLE VINTAGE_2 shifts to -20 270 in 2.5
@overlay CAR ANGLE VINTAGE shifts to -20 380 in 2.5

NARR
Now look at how CAR ANGLE VINTAGE_2 (the top car) moves in a linear direction but CAR ANGLE VINTAGE (the bottom one) moves using an easeout function:

&overlay CAR ANGLE VINTAGE_2 shifts to 120 270 in 2.5
@overlay CAR ANGLE VINTAGE shifts to 120 380 in 2.5 using easeout

NARR
Now look at how CAR ANGLE VINTAGE_2 (the top car) moves in a linear direction but CAR ANGLE VINTAGE (the bottom one) moves using an easein function:

&overlay CAR ANGLE VINTAGE_2 shifts to -20 270 in 2.5
@overlay CAR ANGLE VINTAGE shifts to -20 380 in 2.5 using easein

NARR
Now look at how CAR ANGLE VINTAGE_2 (the top car) moves in a linear direction but CAR ANGLE VINTAGE (the bottom one) moves using an easeinout function:

&overlay CAR ANGLE VINTAGE_2 shifts to 120 270 in 2.5
@overlay CAR ANGLE VINTAGE shifts to 120 380 in 2.5 using easeinout

NARR
Now look at how CAR ANGLE VINTAGE_2 (the top car) moves in a linear direction but CAR ANGLE VINTAGE (the bottom one) moves using an easebounceout function:

&overlay CAR ANGLE VINTAGE_2 shifts to 120 241 in 2.5
@overlay CAR ANGLE VINTAGE shifts to 120 341 in 2.5 using easebounceout

@speechbubble is 155 187 to 100%

NARR
To end off, note that I used 2.5 seconds, however you can use any number of seconds that you want.
These were just some easing functions that exist.
If you go into the Guides, you’ll find a whole list of them!

NARR
One more thing I’d like to discuss.
Let’s look at CAR ANGLE VINTAGE.
When I go to my directing helper, and then my overlay helper, I check out that overlay and see this code:
It says: |italic, color:blue|@overlay CAR ANGLE VINTAGE shifts to 120 341|reset| And |italic, color:blue|@overlay CAR ANGLE VINTAGE scales to 0.150 0.150|reset, no-space|.
What this means:
The value 0.150 is the size of the car (the scale is the size of an overlay, so using the tool scale, you can change the height of an overlay)
The value 120 is a number on the x-coordinate (x coordinate is where the overlay appears horizontally (it can go from left to right)
The value 341 is a number on the y-coordinate (the y-coordinate is where the overlay appears vertically (it can go from top to bottom)
Think of it like a grid.
The y-axis goes up and down (lower numbers below and higher numbers up) as well as the x-axis that goes from left to right (lower numbers on the left side and higher numbers on the right side.)
So, change these numbers accordingly to what fits your scene the best.
P.S All of this I did in zone 1 of this background in case you’re wondering, but you’re probably not lol.
Anyways, back to the start!

@speechbubble reset

@pause for 0

goto easing

…AND THAT’S ALL!

I tried to make it as simple as possible : )

It may look like a lot or may seem complicated but trust me, when you copy it into your script on Writer’s Portal and test it out, it’ll appear “easy”. You can even save it and name that story “Easing Functions” so you can refer to it when you need it.

Anyways, here’s a list of easing functions that are available:

Note: If you don’t don’t write any easing function, then the “linear” one is used by default.

Pic of a Linear Function

Linear%20Function%20001

That’s all for now < 3
Let me know if you have any questions and have a super cool day/night XOXO :ghost: :black_heart:


Overlay help I want it to bounce on screen
#2

Bookmarked :ballot_box_with_check:
I needed this, I was always too lazy to mess around with and test it for myself


#3

Bump :facepunch:


#4

Bump :wink:


#5

Bump :cupcake:


#6

Bump :cake:


#7

Special Order for Jem!

BUmP! :grin:


#8

Bump :yellow_heart:


#9

For the longest time I was wondering how people made those cool effects.


#10

And now you now :sunglasses:

Or you probably knew before :laughing: :revolving_hearts:

I haven’t used easing functions in any of my stories lol but I’ve practiced with these a lot and they’re really cool :rofl:


#11

woooooooooooooooooooooooo