How to recreate the Instagram heart effect
by WengMee Tang on Feb 8, 2016 at 2:08:28 pm
I wanted to recreate the heart effect that you get on a picture when you've liked it on Instagram.
You know, when you double tap there's like this little bit transparent white heart that pops up and disappear?
That I wanted to recreate. Does anyone know how should I go about with this?
I know it's like kind of a scale animation with a bit of transparency but I've noticed that when the heart appears it has this bouncy effect to it?
Is it like this? And does it have motion blur or something when it starts to disappear?
Or have anyone tried to recreate this effect before, maybe a tutorial or something?
Re: How to recreate the Instagram heart effect by Chris Evans on Feb 8, 2016 at 3:42:16 pm
[WengMee Tang]"Is it like this?"
Is that supposed to link to something?
Anyway, I don't use instagram, but according to some YouTube videos I just watched, it looks like it does have some bounce. It looks like it's a pretty simple scale. I'd start with 0% scale, 9 frames, 100% scale, 1 frame, 90% scale, 1 frame 100% scale, 9 frames 0% scale. Throw some easy ease on that and animate transparency. You might have to adjust the timing, 1 frame of scaling back down might be too short, might be 2 or 3 frames.
As far as motion blur, I wouldn't know, but I doubt it based on the way I imagine they program it.