Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
qqignatqq

gsap3 mouseleave and mousemove

Recommended Posts

overwrite is set to false in v3. You can set it to true or "auto". It was set to "auto" in v2.

 

gsap.defaults({
	overwrite: true
})

$('.kareta-b').mouseenter(function(event){
	gsap.to($('.kareta-b .pimg'), 1, {
	  x:"-27%",
	  y:"-18%",
    width:"331%",
	});
});


$('.kareta-b').mouseleave(function(){
  gsap.to($('.kareta-b .pimg'), 0.7, {
	  x:"-27%",
	  y:"23%",
   width:"185%",
    });
});

 

  • Like 3

Share this post


Link to post
Share on other sites

Hey @qqignatqq,

 

Let gsap do the job - better no css transforms.
Here is a possibility:

 

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

 

Happy tweening ...

Mikel

 

  • Like 3

Share this post


Link to post
Share on other sites

Thank you so much for the hint, but I'm not going to be able to use this option, because I also animate X and Y in addition to Scale when I move the mouse. In any case, thank you. I used your decision in another part of the code, it helped me a lot.

 

I have a question. Is there any way you can use it for the whole function "overwrite:true" and for a certain part "overwrite:false". I'm asking because I stopped working on this piece of code: https://jsfiddle.net/2b9fgxL0/ . Opacity doesn't work for some reason... If overwrite is removed, everything will be fine.

 

Share this post


Link to post
Share on other sites

You can overwrite particular properties by passing them into overwrite instead of truehttps://jsfiddle.net/492oqsth/

 

Side notes:

  • You don't need to pass units into y. Pixels is the default. 
  • You should include the duration inside the vars parameter, not as the second parameter :) 

Share this post


Link to post
Share on other sites

Hey @qqignatqq,

 

There are a number of options to combine the tweening of x and scale.
You can also vary the transformOrigin.

 

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

 

Happy tweening ...

Mikel

 

  • Like 1

Share this post


Link to post
Share on other sites
2 hours ago, mikel said:

There are a number of options to combine the tweening of x and scale.
You can also vary the transformOrigin.

Thanks to Mikel, but I had a little different. Here's how it's done with me. When you move the mouse, the XY position changes: https://jsfiddle.net/6q0dgp28/

  • Like 1

Share this post


Link to post
Share on other sites

 

Hey @qqignatqq,

 

Sorry - unfortunately I did not realize your intention 'mousemove'.
 

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

 

Happy tweening ...

Mikel

Share this post


Link to post
Share on other sites
13 hours ago, qqignatqq said:

I have a question. Is there any way you can use it for the whole function "overwrite:true" and for a certain part "overwrite:false". I'm asking because I stopped working on this piece of code: https://jsfiddle.net/2b9fgxL0/ . Opacity doesn't work for some reason... If overwrite is removed, everything will be fine.

 

Use auto.

 

gsap.defaults({
	overwrite: "auto"
})

 

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×