jaeeun

Scale, Rotate, and Opacity

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

Thanks, but it doesn't seem to help.

 

I tried codepen for the first time. here;

 

http://codepen.io/anon/pen/IFBnd

 

Hope this helps.

 

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

Share this post


Link to post
Share on other sites

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

 

http://codepen.io/jonathan/pen/gIzeJ

 

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

  • Like 1

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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? 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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
  });
});
  • Like 4

Share this post


Link to post
Share on other sites

Yay! It works! Thank you so much everybody!

  • Like 1

Share this post


Link to post
Share on other sites

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});

Share this post


Link to post
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.