Jump to content


Using referenced tween in onclick function does not work

Recommended Posts

Hello, again (alas)


I'm afraid I've got another question. Why does this not work?

See the Pen aFnkC by AdObeOne (@AdObeOne) on CodePen


If I remove the function from the js-code the tween command is executed. When I add the function the tween command is not executed and nothing happens when I click on the word.


Also, why does paused not work when I add ", paused:true" to the tween command? I want to make the tween pause until the word is clicked. If I uncomment the pause command then the tween is paused. But if I use this code in DreamWeaver then I have to click the word twice before the tween command is executed. So there this function does work, except from the double clicking.


Also why is there not a Run button when I log in to CodePen and start a new codepen?


I tried to find the answers online, but couldn't find them


Thanks for your help,



Link to comment
Share on other sites

First, reversed:true, isn't valid. Reversed isn't a special property of a tween, so setting it has no effect. Which probably had an impact on your following logic, but I'll run through it anyway.


The first time you click you say "if the tween is reversed then play it"... well the tween is not reversed so then it doesn't play() on the first click.


Since the tween wasn't reversed on the first click your else statement is then reversing the tween which makes it eligible to be played on the second click.


Also, it looks like you were missing a { in your conditional statement.


Take a look at this update which consolidates things quite a bit:


var tWord = TweenMax.to("#apWord", 0.5, {x:-124, y:-104});

function fWordClicked () {
  //toggle the reversed state






also, not sure why paused:true didn't pause the tween. Be sure you don't add it to the css object. If using a css object it would go like this:

var tWord = TweenMax.to("#apWord", 0.5, {css: {x:-124, y:-104}, paused:true});

I noticed your reversed:true was inside the css object






Also why is there not a Run button when I log in to CodePen and start a new codepen?


I think most folks who are doing CSS-heavy work like seeing the instant updates every time they change some code. To activate the run button you need to go into the JS panel and de-select "auto update preview".



  • Like 1
Link to comment
Share on other sites

Thanks Carl for your response.


The reason I started using Greensock is that I found the function I used here online as a solution for reversing an animation when the same visual element is clicked every second time. Using this function in Edge Animate worked just fine. So I had no reason to suspect that the use of reverse(d) was not correct.


In documentation about a fromTo tween command I found that the special properties should be within the curly braces. Because the paused:true did not seem to work outside, i tried it inside the {}.


Good to know about the auto update in CodePen. When things don't work, you start to wonder if the preview is updated.


The logic of the solution seems very strange to me. But it works. And that is what counts.


Wouldn't it be great if there were an extra event, besides the click and double click. A toggle click event, which would reverse the functionality of the function that was assigned to it.


Greetings from The Netherlands,



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