How do you figure out what is a good time length/duration for transition animations wrt regular animations. I'd assume it's faster for transitions but if it's too low-latency then you risk the human brain not even acknowledging the transition, making it essentially useless.
tc-liu
What's the relationship between this and "the ease function" taught in the Bezier curve lecture? (See link below) Do we use the same function taught in that lecture or is there some other function that does the job? https://cs184.eecs.berkeley.edu/sp23/lecture/7-47/intro-to-geometry-splines-and-be
Veriny
@tc-liu I think there's a lot of mathematical functions that you could go for to simulate the slow-in/slow out effect, I think it mostly depends on the effect you want of whatever you're animating. Maybe the sigmoid function might be useful?
SeanW0823
One application the ease-in and ease-out effect that comes to mind of is when one video slowly fades out while the other video fades in during video transitions.
aceschen
Something interesting about the principle of ease-in ease-out is how often it shows up in UI/UX animations too. Microinteractions tend to feel much more organic with some level of easing rather than linear transitions. For example, you can see options for different kinds of easing curves in Figma - there's a bunch of presets for common cases, but also the option to make custom easing beziers to customize timing more specifically. Even for non-tangible thing like UI, easing makes animations feel more natural (and intentionally unnoticeable).
rsha256
@aceschen why would you want animations to not be noticeable? Shouldn't you want a delay for people to acknowledge causality between events? (i.e. this component only appears and loads after i click this specific button)
How do you figure out what is a good time length/duration for transition animations wrt regular animations. I'd assume it's faster for transitions but if it's too low-latency then you risk the human brain not even acknowledging the transition, making it essentially useless.
What's the relationship between this and "the ease function" taught in the Bezier curve lecture? (See link below) Do we use the same function taught in that lecture or is there some other function that does the job? https://cs184.eecs.berkeley.edu/sp23/lecture/7-47/intro-to-geometry-splines-and-be
@tc-liu I think there's a lot of mathematical functions that you could go for to simulate the slow-in/slow out effect, I think it mostly depends on the effect you want of whatever you're animating. Maybe the sigmoid function might be useful?
One application the ease-in and ease-out effect that comes to mind of is when one video slowly fades out while the other video fades in during video transitions.
Something interesting about the principle of ease-in ease-out is how often it shows up in UI/UX animations too. Microinteractions tend to feel much more organic with some level of easing rather than linear transitions. For example, you can see options for different kinds of easing curves in Figma - there's a bunch of presets for common cases, but also the option to make custom easing beziers to customize timing more specifically. Even for non-tangible thing like UI, easing makes animations feel more natural (and intentionally unnoticeable).
@aceschen why would you want animations to not be noticeable? Shouldn't you want a delay for people to acknowledge causality between events? (i.e. this component only appears and loads after i click this specific button)