Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jamesthemonkeh

Tweenmax Beginner Help

Recommended Posts

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
Link to post
Share on other sites

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

  • Like 3
Link to post
Share on other sites

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

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

×