Scale, Rotate, and Opacity

[jaeeun]

I'm trying to make the images on this page rotate, scale and change opacity all at the same time, like some images on this site do;

http://soyouwanttogotorisd.com/

And this is my site;

http://www.ducklingfarm.com

I'm using TweenMax, and this is my code;

 

$(document).ready(function() {
TweenMax.from( $('#homeImg'), .5,
{css:{scale:.05, opacity:0, rotation: 180}, ease:Quad.easeInOut}), 400,-400);
});

 

But nothing's happening...

Please help me!

Thanks!

[Jonathan]

Welcome to the GreenSock Forums

 

what about making sure the images are loaded before animating them... by using the window load event

$(document).ready(function() {
   $(window).on('load', function(){
      TweenMax.from( $('#homeImg'), .5,{css:{scale:.05, opacity:0, rotation: 180}, ease:Quad.easeInOut}), 400,-400);
   });
});

the window event makes sure all images are loaded on the page.. so you can run the tween when the image is loaded

 

does that help?

 

if not.. if you can provide a jsfiddle or codepen example it will be very helpful

[jaeeun]

Thanks, but it doesn't seem to help.

 

I tried codepen for the first time. here;

 

See the Pen IFBnd by anon (@anon) on CodePen

 

Hope this helps.

 

One thing is that the site is built with Wordpress, so the actual code is a bit different.

[Jonathan]

what about this .. it looks like your syntax was wrong for the from() method ..

 

http://api.greensock.com/js/com/greensock/TweenMax.html#from()

 

you had two extra parameters in there at the end

 

See the Pen gIzeJ by jonathan (@jonathan) on CodePen

 

plus i had to change your image tags and make there id's unique.. they were all named #homeImg

 

so i added an arbitrary attribute selector that finds any img tag that has an ID with part of the string homeImg

$(document).ready(function() { 
   $(window).on('load', function(){
      TweenMax.from( $('img[id*="homeImg"]'), 0.5,
           {css:{scale:0.05, opacity:0, rotation: 180}, 
           ease:Quad.easeInOut
      });
   });
});

you could also target the images like this:

$(document).ready(function() { 
   $(window).on('load', function(){
      TweenMax.from( $('.homeImg > img'), 0.5,
            {css:{scale:0.05, opacity:0, rotation: 180}, 
            ease:Quad.easeInOut
      });
   });
});

in that case it would find any img tag that is a first child of .homeImg div

 

just a quick note.. in codepen you can add your js and javascript libraries by clicking the sprocket icon on the JS window area

[Carl]

Hi and welcome to the GreenSock forums.

 

Yup, Jonathan mentioned everything I was about to write (nice job!)

 

In cases like this it helps to make things as simple as possible.

Here is my bare-bones version: http://codepen.io/GreenSock/pen/FcjDr

[jaeeun]

Interesting... I can see that it your code works like charm in codepen, but it still doesn't do anything on my site. What could be wrong? 

[Jonathan]

on your site.. http://www.ducklingfarm.com/

 

you have ID's with the same name... ID's are supposed to be unique ... so try naming your IMG tags like homeImg1, homeImg2, homeImg3, etc.. instead of having them all have the same ID name : #homeImg

 

try changing your selector to $('.homeImg > img')

 

and when i look at your site you are still using the code from your first post.. try changing the code to reflect Carl or My codepen in the examples we changed for you above..

[jaeeun]

Hm, I did change the code(you can see it from my page source

0, but still the site still doesn't reflect it... 

[jamiejefferson]

You are using a really really old version of jQuery that doesn't have a .on() function.

 

You could either update your jQuery to v1.7 or above (although the hundred other plugins you are using might freak out) or just use this code instead:

$(window).load(function(){
  TweenMax.from( $('.homeImg > img'), 0.5,
    {css:{scale:0.05, opacity:0, rotation: 180}, 
    ease:Quad.easeInOut
  });
});

[jaeeun]

Yay! It works! Thank you so much everybody!

[2dareis2do]

I am kind of new to this but have figured out that where you use a css default, i.e. opacity: 0 and then you want to to override with inline css using tweenMax etc, it seems to make more sense to use the .to method.

 

SO in your case the following worked for me:

 

TweenMax.to( $('.homeImg>img'), 0.5,
{css:{scale:.05, opacity:1, rotation: 180}, ease:Quad.easeInOut});