Jump to content


Help finish a push image and scale fullscreen animation

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

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.


  • Like 1
Link to comment
Share on other sites

That looks pretty good to me. Nice work. :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.