animating scale and opacity

[Combustion 0 Likes (Newbie)]

Hi, 

New to the javascript version of GSAP but have been using greensock for years

 

Im trying to basically animate the scale of an image and also the opacity like this:

 

 

 

 

    $(document).ready(function(){
    
    $('.photo').mouseover(function (e){   
        TweenMax.to($(this), .2, {scaleX:1, scaleY:1, css:{opacity:1}});
    })
    $('.photo').mouseout(function (e){    
        TweenMax.to($(this), .2, {scaleX:0.8, scaleY:0.8, css:{opacity:0.7}});
    })


})
 

But it only seems to do the opacity, but if I take out the opacity it does the scale.
am I missing something painfully obvious?

thanks

C

[jamiejefferson 1,185 Likes (Superhero)]

scale is a property to be tweened by CSSPlugin and should be inside the css object

(with GSAP 1.8, you can also skip the css object altogether if you want)

TweenMax.to($(this), .2, {css:{scaleX:0.8, scaleY:0.8, opacity:0.7}});
// or
TweenMax.to($(this), .2, {scaleX:0.8, scaleY:0.8, opacity:0.7});

I think the mixing of styles is what caused your issue.

[Combustion 0 Likes (Newbie)]

Yes thats done it thanks! 

[lucaskaspary05 0 Likes (Newbie)]

On 2/6/2013 at 1:41 PM, jamiejefferson said:

scale is a property to be tweened by CSSPlugin and should be inside the css object

(with GSAP 1.8, you can also skip the css object altogether if you want)

TweenMax.to($(this), .2, {css:{scaleX:0.8, scaleY:0.8, opacity:0.7}});
// or
TweenMax.to($(this), .2, {scaleX:0.8, scaleY:0.8, opacity:0.7});

I think the mixing of styles is what caused your issue.

 

[Carl 9,066 Likes (Superhero)]

Luaskaaspary,

 

I'm guessing your post above where you just quote jamie's answer from 5 years ago was a mistake. 

If you have an actual question please let us know, otherwise I'll delete it. no biggie.