Triggering GSAP with an event handler

[Scarybelles]

Greetings, friends.

 

Inspired by 

See the Pen aqaYxr?editors=0010 by kscarabello (@kscarabello) on CodePen

 that came out this week (the animal that watches you type in your email, and covers it's eyes when you write in a password), I'm trying to test my skills to see if I can recreate something similar. Where I am at right now is trying to get any sort of animation to work upon focusing on the password input bar. I intended to target the 'star' in the animation, and (in following the model of the other codepen), am wondering what I'm missing to make that animation trigger. Doesn't have to be pretty - just want to get the targeting an animations to work correctly.

 

 

 

See the Pen OQwWRb?editors=1010 by kscarabello (@kscarabello) on CodePen

[OSUblake]

You didn't select the 'email' element. And a polygon doesn't have a 'width' and 'height' property. You could use scale or scaleX and scaleY for that.

 

var star = document.getElementById('star')
var email = document.querySelector(".email")

var onEmailFocus = (e) => {
  TweenMax.to(star, 5, {x: '+=1000', y: '-=1000'})
}

email.addEventListener('focus', onEmailFocus)

 

[Scarybelles]

Thanks OSUBlake! Much appreciation.