qqignatqq Posted November 13, 2019 Share Posted November 13, 2019 Hello. After the update began to work strange animation. When pointing at a block, the image should approach, and when the mouse is removed - it should take its original position, but for some reason in the new gsap it does not work. OlD: https://jsfiddle.net/v07h348a/ NEW: https://jsfiddle.net/ads2v47q/ Link to comment Share on other sites More sharing options...
OSUblake Posted November 13, 2019 Share Posted November 13, 2019 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%", }); }); 3 Link to comment Share on other sites More sharing options...
mikel Posted November 13, 2019 Share Posted November 13, 2019 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 3 Link to comment Share on other sites More sharing options...
qqignatqq Posted November 18, 2019 Author Share Posted November 18, 2019 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 18, 2019 Share Posted November 18, 2019 You can overwrite particular properties by passing them into overwrite instead of true. https://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 Link to comment Share on other sites More sharing options...
mikel Posted November 18, 2019 Share Posted November 18, 2019 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 1 Link to comment Share on other sites More sharing options...
qqignatqq Posted November 18, 2019 Author Share Posted November 18, 2019 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/ 1 Link to comment Share on other sites More sharing options...
mikel Posted November 19, 2019 Share Posted November 19, 2019 Hey @qqignatqq, Sorry - unfortunately I did not realize your intention 'mousemove'. See the Pen jdaJrw by mikeK (@mikeK) on CodePen Happy tweening ... Mikel Link to comment Share on other sites More sharing options...
OSUblake Posted November 19, 2019 Share Posted November 19, 2019 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" }) 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now