Help finish a push image and scale fullscreen animation

[donleche 3 Likes (Newbie)]

Hi, I'd like some ideas how to improve this animation. 

 

The user taps an image and a clone of it should then briefly "push down" and then swoop up, covering the viewport. I have the basics down but the feel definitely isn't there yet. Anyone?

See the Pen grWNmE?editors=0010 by oskarr (@oskarr) on CodePen

[PointC 14,425 Likes (Superhero)]

Hi donleche 

 

Welcome to the forums.

 

I'd probably just speed up the timing a bit and change the eases. Something like this maybe:

// push down shortly
$img[0].style.visibility = 'hidden';
tl.to($clone, 0.1, {
scale: 0.97,
ease: Power1.easeIn
});
// scale up fullscreen
tl.to($clone, 1.5, {
x: 0,
y: 0,
delay: 0.05,
scale: 1,
width: '100%',
height: '100%',
ease: Power4.easeOut
});

Hopefully that helps a bit.

 

Happy tweening and welcome aboard.

[donleche 3 Likes (Newbie)]

Thank you, PointC! This already feels miles better.

 

Here's the new version:

See the Pen MyoWrb?editors=0011 by oskarr (@oskarr) on CodePen

— are there still parts to optimise?

[PointC 14,425 Likes (Superhero)]

That looks pretty good to me. Nice work.