Not Animating

[Susan 7 Likes (Newbie)]

I have followed the basic tutorial - https://greensock.com/get-started-js but the logo isn't animating (moving to the left) - https://q9.golddigitaldesign.com/.

 

Please help, thank you!

[Sahil 2,655 Likes (Superhero)]

As you are using jQuery,
 

$(document).ready(function(){

TweenMax.to(".logo", 2, {left:600});

});

 

It runs when DOM is ready. Without it, code does execute but as there is no DOM to work with nothing animates.

[Susan 7 Likes (Newbie)]

I am very sorry, my Javascript knowledge is shallow.

 

Do you mean to replace this code

 

TweenMax.to(".logo", 2, {left:600});

 

to 

$(document).ready(function(){
TweenMax.to(".logo", 2, {left:600});
});

 

in the main.js file?

 

I have done the replacement but it is still not working.

 

Please assist further, apology for my ignorance, thanks.

[Sahil 2,655 Likes (Superhero)]

Ya looks like you aren't using jQuery.

 

You can instead use following equivalent in plain JavaScript

 

document.addEventListener("DOMContentLoaded", function(event) { 
  TweenMax.to(".logo", 2, {left:600});
});

[Sahil 2,655 Likes (Superhero)]

Sorry for the confusion, to animate left and top properties. You need to set position of that element using CSS. If you add following CSS, it will work

 

.logo{
	position: relative;
}

 

[Susan 7 Likes (Newbie)]

No wonder, thanks so much, Sahil!

[Jonathan 5,389 Likes (Superhero)]

Hello @Susan and Welcome to the GreenSock Forum!

 

Just to add to @Sahil's great advice.

 

Using his code i would make one small change. convert left to x (translateX). This way you are using CSS transforms which can animate smoother versus CSS position offsets that can trigger layout on each render tick.

 

//wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {  
  
  // wait until window is loaded - all images, links, css, scripts, fonts, and other media assets
  window.addEventListener("load", function(){ 
      
       // run animation code here
       TweenMax.to(".logo", 2, {x:600});
    
  });
});

 

More info on why this better found here:

• CSS Tricks Article by @GreenSock's Jack: https://css-tricks.com/myth-busting-css-animations-vs-javascript/
   
• Paul Irish Article also on this subject: https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

The window load event makes sure that your logo which i presume is an image is only animated when the DOM is ready (HTML markup), and the window is loaded.  Meaning only run your code to animate the image when both DOM and window is loaded so your animation fires consistently cross browser.

 

Happy Tweening!

[Susan 7 Likes (Newbie)]

@Jonathan Thank you so much for your kind advice! I really appreciate it, thank you!