Jump to content


Using a keypress to animate the next element

Recommended Posts

Hi, I'm trying to recreate a form I've seen to help me learn GSAP. I have it so when you click in each of the input fields, the placeholder moves above the fields, which is great. What I'd like to try and do is make it so when you press the Tab Key the next placeholder in the next field moves up.



See the Pen jQwVJj by anon (@anon) on CodePen

Link to comment
Share on other sites

Hi @bennyboy1978 :)


If I understand your question correctly, I think this should work for you.


$("input").focus(function() {
  TweenMax.to($(this).siblings(), 0.6, { y: -45, x: -20, ease: Power2.easeOut });


See the Pen bQRgrb by PointC (@PointC) on CodePen

Happy tweening.



  • Like 5
Link to comment
Share on other sites

Awesome! Works like a treat :)

Thanks so much for the quick reply!

  • Like 1
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.