This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Tarun Chakravorty
Posted Sep 02 - Read on Facebook

A general question i have been debating in my head for a while : When doing a simple fading in / fading out animation between 2 images (say in a slideshow), what are the preferred animation values?

I experimented with different types of curves and timings and came to the conclusion that for fades the curve options don't make much difference, but having the initial image fade out quickly, and then having the new image fade in on a longer time, makes the overall animation feel smoother. I'd love to hear if others have given any thought to this. What kind of properties do you use when writing simple fade in / fade outs ?

For reference here is something I have been using that I (mostly) like:

Initial image fades out in 0.2 seconds with a easeIn Quart, and on complete, new image fades in, in 1.1 seconds with a easeOut Quart curve. I'm taking these curve values from here: