Tweenmax Beginner Help

[jamesthemonkeh]

Hello

 

I have just discovered TweenMax and it looks really good.  I am trying to use it despite being a bit of a beginner with JavaScript and having some problems.

 

I'm trying to attach it to my button but I cannot get the Tween to work.  It is probably something simple and I hope someone would kindly be able to point me in the right direction.

 

http://iwillbeawebdeveloper.co.uk/rfg/index.html#

 

<script>
    function() {
        givemefruit = document.getElementById("givemefruit");
        givemefruit.onclick = function() {
        TweenMax.staggerTo(".box", 1, {rotation:360, y:100}, 0.5);   
        };
    }
    </script>

Thanks

James

[Dj.Sunrise]

I'm beginner too. But I guess, try to use restart() here is an example  

See the Pen Dtqwz by GreenSock (@GreenSock) on CodePen

[Shaun Gorneau]

Have a look here ... Since you were making use of jQuery already, I cleaned it up a bit. I'm not entirely sure what you're after, but one big issue was your layout was blocking access to the select and button. I positioned those relatively and placed their z-index higher. Based on the code, things are working as expected ... but I'm not sure what you are expecting

 

See the Pen WwEwZJ by sgorneau (@sgorneau) on CodePen

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

The issue comes from your JS code. The problem is that you're creating a function but not giving it a name so it can be referenced and you're not invoking that function neither:

function() {
  givemefruit = document.getElementById("givemefruit");
  givemefruit.onclick = function() {
    TweenMax.staggerTo(".box", 1, {rotation:360, y:100}, 0.5);   
  };
}

Javascript needs to know how to reference a function. Basically the browser reads and interpretates your code, at that point it stores the function reference in memory so you can access it later on your code and execute it. In this case you're typing the word function but JS expects a name after the word function or the function expression to be stored in a variable, like this:

// function name
function myFunction(){
  // code here
}

// invoke the function
myFunction();

// anonymous function
var myFunction = function(){
  // code here
};

myFunction();

Finally it seems that you're trying to wrap your code inside a IIFE to avoid your code to be stored in the global scope. In that case, after defining the function it should be invoked immediately, but everything should be wrap in parenthesis to avoid JS to see the word function at the start of the code line:

(function() {
  givemefruit = document.getElementById("givemefruit");
  givemefruit.onclick = function() {
    TweenMax.staggerTo(".box", 1, {rotation:360, y:100}, 0.5);   
  };
} () );// the parenthesis after the curly bracket execute the function

Finally take a look at this to get a better grasp of JS:

 

JS Tutorial

http://www.w3schools.com/js/default.asp

 

IIFE information

https://en.wikipedia.org/wiki/Immediately-invoked_function_expression

[jamesthemonkeh]

Thanks for your welcome, and your help.  You have helped me get much closer to where I want to be.

 

Ideally I want the boxes to fly in from left of the screen.  I am slowly plugging the pieces together!

 

http://iwillbeawebdeveloper.co.uk/rfg/index.html#

 

Edit:  Boxes are now flying in.