Using a keypress to animate the next element

[bennyboy1978]

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.

Thanks!

Ben

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

[PointC]

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.

 

[bennyboy1978]

Awesome! Works like a treat

Thanks so much for the quick reply!

[OSUblake]

Hi @bennyboy1978 

 

Here's a demo I made for this thread. You may find it useful as it deals with blur events.

 

See the Pen rQwwjj by osublake (@osublake) on CodePen

 

 

[bennyboy1978]

That's really cool! Thanks @OSUblake