Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Eugene Rayner

rotate on hover (vuejs @mousein) - not sure what's going wrong.

Recommended Posts

Hey guys, new to gsap 3 (still need to read more), and newish to vuejs. just wondering if anyone can tell me what's going on here to make the 'ball' flicker on @mouseover - as if it's trying to roll back from the @mouseout.

 

This is an animation I am working on for my Portfolio so here's the sample (hovering the face image)
https://zealous-panini-8d66ea.netlify.app/

 

<div @mouseover="hoverIn" @mouseout="hoverOut" class="image-text-block--image" style="position: relative;">
            <div class="me2">
              <svg version="1.1" id="cogs" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 982.4 982.3" style="enable-</svg>
            </div>
            <img class="me" :src="me" alt="Eugene">
 </div>

 

the outermost div is firing the hoverIn method.

 

 methods:{
    hoverIn(){
      gsap.to('.me', {x:200rotate: 120duration: 0.2})
      gsap.to('#cyan-cog',{transformOrigin: '50% 50%'rotation: 360duration: 5repeat:-1ease:"Linear.easeNone"})
      gsap.to('#large-cog', {transformOrigin: '50% 50%'rotation: -360duration: 5repeat:-1ease:"Linear.easeNone"})
    },
    hoverOut(){
      gsap.to('.me', {x:0rotate: 0duration: 0.2})
      gsap.to('#cyan-cog', {x:0duration: 3})
    }
  }

 

I come from a SCSS background and have decided to use gsap for animations as it's something I want to incorporate regulary.

In SCSS we can do something like 

.container{
   &:hover{
        .image{

              width: 20px
         }
   }
}

to move the image when the container is hovered.

In this case it feels like putting the hover on the outer container isn't working as suspected.. What am I doing wrong?

 

If I could get help from anyone + any recommended articles for VueJS + GSAP that would be great.

Link to comment
Share on other sites

Hey @Eugene Rayner,

 

I am not a vue expert.
It could go something like this

 

See the Pen dyWbeMq by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

hey @mikel I appreciate your input! I just got back to this. Seems like I was using the wrong mouse events. The ones you are using are much better!
I also implemented your code because you're right about the circumference thing. I love it. I appreicate you Mikel. Thanks again :)

  • 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.
×