Jump to content
Search Community

Firing animations with a toggled onclick? Why is this ignored, GSAP?

T.Gregory test
Moderator Tag

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Did I step into the Twilight Zone with GreenSock? Please Help...

 

ALL I have been looking for since I signed up for GreenSock is a simple and reliable toggle snippet that will open/play my animation on click and then shut it (toggle) with another click. Isn't this the foundation of any useful animation as opposed to flashy decorative designs that automate on page open? 

 

Well I can't find ANYTHING in GSAP that I can use as a straightforward toggle button. I have scoured the web for dozens of hours, and probably over 100 articles, forums and demos but have only found every combination of NOT usable and more and more dancing icons that play on page open. All the demos that claim to toggle, just pause running animation, or replay it after the pause. 

 

How is this possible? I am in disbelieve and I stubbornly keep searching  - but now I just need to reach out and ask for help. 

 

After days of frustration, I finally found this demo on Codepen that simply does what I have been looking for:

 

 

Problem is - it SIMPLY DOESN"T WORK outside of codepen. At this point I am questioning reality in general due to fatigue and frustration and hope that I'm just missing something simple. 

 

I try to design animations that are interactive and have a purpose or function. I don't see the value of dancing icons and logos that play on page open as there is so much more potential for animating elements for dynamic interface. I am very excited about GreenSock and the animation tools seem useful and intuitive. I just wish I could apply them. My apologies for the subjective wordiness, but this has really been a frustrating experience. 

 

 

See the Pen yNjNWe by anon (@anon) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Sorry to hear about the frustration and my advice for future endeavours is that you should start your search for answers here in the forums. We have great guys around that can solve almost everything you throw at them, so please don't hesitate to try their limits ;).

 

As for the toggle button, I don't see any reason why that code shouldn't work outside Codepen. Check that jQuery and GSAP are being loaded and with the right path. Also check that you're storing the GSAP instance you want to toggle in a variable and then using that variable with the reversed() method to toggle the direction of the instance. This sample you mention is the most basic way to toggle an animation. The reversed() method acts as a getter/setter of the direction of a Tween/Timeline playhead, so basically when you create an instance you sate it reversed status as true, so when you click or use any other event handler, it goes forward and then the reversed state changes to false, so the next event will play the animation backwards. Normally I use a ternary operator because is less code, like this:

var t = TweenLite.to(element, 1, {x:300, y:300, paused:true, reversed:true});

// check reversed state
// first block of code will be executed if true
// second block of code will be executed if false
t.reversed() ? t.play() : t.reverse();

Please take a good look at your code, paths to the libraries and JS syntax and if the problems persists copy/paste your code in codepen so we can get a better idea of the issue.

 

Happy Tweening!!

Edited by Rodrigo
Correct code
  • Like 3
Link to comment
Share on other sites

Thank you Rodrigo - your code makes sense to me and seems efficient and I am going to give it a try. Would you mind showing me exactly where I would apply the click event to it? I'm sure its very simple but I'd be guessing the exact syntax and I could use a little break from guesswork right now. 

 

Thanks in advance. 

Link to comment
Share on other sites

Hi T.Gregory. I echo Rodrigo's sentiments about being bummed to hear about the struggles. Trust me - once you get over the initial learning curve, things will really fall into place and you'll see how sensible the API is and how much power you get. 

 

You asked Rodrigo to show you exactly where to apply the click event, but I'm a little fuzzy on what you're looking for since your original codepen had the logic in place and was working. Perhaps we could help better if we could see your files or a demo somewhere that's broken. It's just really hard to troubleshoot blind. You said it worked in codepen but once you took it out of codepen it broke, so maybe you could show us that? 

 

Also, there was a small typo in Rodrigo's code. The "play" was missing "()". So it should have looked like: 

t.reversed() ? t.play() : t.reverse();

However, a slightly shorter option that does basically the same thing is: 

t.reversed( !t.reversed() );

I'm sure we can get you up and running once we see the broken example. And don't feel bad - we've all had times when we're frustrated, sleep-deprived, and just not quite able to get something working and need a nudge in the right direction. Stick with it - you're gonna love GSAP. 

  • Like 1
Link to comment
Share on other sites

Hi Jack - I appreciate all the encouragement and I am eager to get familiar with all the GSAP goodies. Unfortunately, I still can't get anything to move on click. I forked a Starter Pen on Codepen and put in Rodrigo's code and made my best guess for the click function. BTW - I am using chrome on a new Imac with HTML5 boiler plate for tester templates with the CDN's in the html just like instructed. But here's my CodePen link:

 

See the Pen OVZMZj by code-a-la-mode (@code-a-la-mode) on CodePen

 

So I guess if you can show me what I'm missing in my pen to make that red box move to anywhere by clicking the button, and then, on the next click, return to its original position. That's all I need. I've only had problems with this one issue - but it just so happens to be the one thing I can't move forward without. 

 

Amazingly, I have tried hundreds trial-and-error modifications to snippets and demo's in the last 24 hrs and not a single time did I get it right. Its hard not to loose faith that anything works at all after a point, but I believe you guys that its works and am sure I have just been missing the mark by a single semicolon or comma on each try. 

 

Ple

Link to comment
Share on other sites

  • Solution

You need to capitalize the 'B' in the tween selector, which is case sensitive - "#redBox" not "#redbox"

 

I don't think Jack knew that the tween was paused when he wrote that snippet of code, so the tween is going to stay paused. If it wasn't paused, that would work just fine. There are other ways around that, but since you're learning I would just use what Rodrigo suggested and start tweaking it from there.

 

See the Pen PqeNML by osublake (@osublake) on CodePen

  • Like 4
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.
×
×
  • Create New...