HOW TO: Use Easing Functions :disco:

Hey :sparkling_heart:

You can add more info to overlay animations (check out this guide on overlays right here: Placing & 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

Another thing!

You can use easing functions with zooms:

@zoom on X Y to % in S using easing_function

Example:

@zoom on 58 378 to 272% in 3 using easeout

And:

Easing functions work with pans as well.

@pan to zone X in S using easing_function

Example:

@pan to zone 2 in 4 using easebounceout

*this would pan (slide) to zone 2 in 4 seconds and it would also have the cool easing function effect applied to it.

Can also check out my IG post on this: https://www.instagram.com/p/Bw4GhnlFACs/

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: :cake4:

159 Likes
HOW TO: Different Types of Zooms
Make text overlay bounce
Want a moving title?
"List" of Helpful Threads
Overlay help I want it to bounce on screen
How many easein zoom are there and could you show me how they work any how to do them please
:gem: JemU776's Tutorials LIST (Full) :gem:
Overlay Issue (Help required)
DARA’S GUIDE: Overlays
"Stupid" questions that never get answered? Get The Help Here!
Looping Overlay Help
What are the types of overlays positions? Like scales...*HELP PLEASE*
How to bump overlays
"Stupid" questions that never get answered? Get The Help Here!
I need help with my overlays :(
Does anyone know how to do zooms with like graphs?
JemU776's Help Thread
Appreciation Thread For Jem! :heart:
DARA’S GUIDE: Overlays
Advanced coding?
What would you say are the most useful and critical commands used in advanced directing
DARA’S GUIDE: Overlays
HOW TO: Have Your Overlay Come in from Offscreen + Workshop :unicorn: :purple_heart:
:crescent_moon: HOW TO: Use Pans :crescent_moon:
:lollipop: TIP: Rotating An Overlay Without Having it Shift Somewhere else :purple_heart:
Making an object bounce off of someone's head?
HOW TO: Stage Direction
How do you do a bouncy zoom?
Some Directing Questions
"Stupid" questions that never get answered? Get The Help Here!
New zoom? (starts fast goes slow?)
Helpful Links for Authors :blob_hearts:
:rose: HOW TO: Pan + Zoom at the same time + Extra Material :rose:
Zoom help pretty please!
HOW TO: Deal with the Overlay Brightness Issue
The Complete List Of Coding Tutorials! (:
Trouble with Easing Functions
Easebouncein overlay animation
Very advanced overlay help needed
The Complete List of Everything - Updated! {Art Shops, Reviewers + More!}
How do I make the camera bounce?
How do you make the zoom bounce?
How to zoom like this?
Can someone help me make the transition smoother?
Smooth zoom problem!
TIP: Rotating Overlays <(^.^)>
HELP:i need a script template
Need help again :/
DARA’S GUIDE: Overlays
How do I slow a rotation of an overlay?
Avoiding Zooming Curve Tutorial With Examples :crescent_moon: :sparkles:
How to zoom in & out of backgrounds
How do I make my character walk to a certain place?
How to add smooth zooms?
Where do you find the best directing and coding tricks?
Panning with easing functions
Any coding tips?
Tip: Upside Down Code :jack_o_lantern:
Camera zoom animations
Using easing function with zoom
I need help with making overlays any tips
How can I make a overlay bounce?
Moving overlays foward
Amberose's Live Thoughts on Your Stories
You can use easing on zooms?!
Using Tappable Overlays in a Mannequin Template :blue_heart:

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

6 Likes

Bump :facepunch:

Bump :wink:

Bump :cupcake:

2 Likes

Bump :cake:

1 Like

Special Order for Jem!

BUmP! :grin:

3 Likes

Bump :yellow_heart:

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

2 Likes

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:

4 Likes

woooooooooooooooooooooooo

1 Like

Bump :partying_face:

Thanks for there :slight_smile:

No problem :wink:

Bump :stuck_out_tongue_winking_eye:

bump! I ways looking in my bookmarks to find this, and BOOM, showed up, cause I am working on my intro for my storyyyyyyyyyyyyyyyyyy

2 Likes

Bump ^^

1 Like

Bump <3

Bump :rewind:

Bump :blue_heart: