Ease in effect

The animated image above represents 3 scenes which will show how ease in/out effect works.

Also, some details on how I did this by only using Adobe Photoshop via timeline-frame animation:

(attached image)
As you can see, there are alot of frames/layers I created to slow down the movement of the object (orange circle), the same principle applies to fast movement with less frames.
The slower the movement is, the more frames are being created and the distance are getting narrower until it reaches the end of the motion. The faster the movement is, the less frames are being created and the distance are getting wider between those frames/layers.

I'm not much a pretty good person to explain stuff so I'll provide a sample PSD here consisting the animated shot above.
PSD sample: https://drive.google.com/file/d/0BzCtDp4PaWRuaXlldlZHQ1RLbms/view?usp=sharing

*output.gif includes the finish product of the animation
*ease.psd includes all the folders/layers that I created to make the animation move
*ease render.psd includes all of the .PNG files that I dragged in to produce the result of the animation
*1-122.png are the images that I saved from each of the folders/layers on ease.psd
*slowmo.gif includes the movement of the object in 0.5 secs

G+ post: https://plus.google.com/101558690637206440787/posts/Gagg18S8iuA

More about interpolations by @Chris Basha (thanks for saving for web!)
https://plus.google.com/100476207618385495038/posts/Yzn5ejHPpKG

Tutorial written by @Taylor Ling on how to do animations via PS on timeline-video
http://androiduiux.com/2014/08/26/ui-animation-in-photoshop-tutorial-1/

More by Jovie Brett Bardoles

View profile