Jump to content
Search Community

progress() is triggering onComplete handler?

dax006 test
Moderator Tag

Go to solution Solved by dax006,

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

this is my first attempt using GSAP (it seemed to be the best animation library I could find).  I'm trying to create a simple slot machine.  Here is a codepen with the minimal amount of code.

 

 

It does 3 things.  After creating a random symbol, it
1) creates a 'constantly spinning' tween and saves it
2) creates a 'slowing' tween and saves it
3) resets the progress of each tween/symbol to be 1/4th down the screen.

Bug/problem #1 - Tweens are playing yet NOWHERE do I play() the tween.  The tweens are PAUSED by default.  Even if they are not paused, I IMMEDIATELY pause() them in resetslot().
Problem #2 - Progress() does not seem to be setting all symbols accurately (you can immediately see that the top symbol is askew)

Problem #3 - Setting a tweens progress() to zero triggers its onComplete (watch the console)

Problem #4 - Setting a tweens progress to 1 triggers its onComplete even though I have SuppressEvents:true (watch the console)

I'm very frustrated with GSAP at the moment .  Any help is appreciated

 

-John

 

Edit:problem 5 can't pause the codepen demo so can't read console

 

See the Pen LGoNrE by dax006 (@dax006) on CodePen

Link to comment
Share on other sites

Hello dax006, and Welcome to the GreenSock Forum!

 

When i look at your codepen you have some HTML that is malformed. There is a script tag after the ending html tag. And codepen is throwing an error regarding the doctype tag. When using codepen you dont need to include the full html and body tag since the content of the HTML panel is basically like inner contents of the body tag.

 

I also noticed that in your CSS your main container has position absolute which is fine, but then you have a bunch of child elements with position absolute. As a rule of thumb you should always have a containing parent element that has position relative on it. So its children with position absolute can be absolutely positioned relative to their parent. This makes sure you dont see the behavior your seeing since nested absolutely positioned elements within absolutely positioned elements will give different results cross browser.

 

That is why i only see one of your child animating. Normally you would just translate the parent of all those children and the child will animate accordingly, but again that parent should also have a parent with position relative so it can animate properly and relative to that parent. That is why you are seeing those inconsistent results. Usually when animating elements its best to have the CSS and HTML setup properly, so it will make animating much easier. ;)

 

You can always use a timeline instead of TweenMax instance reference.

 

I see this more of the way you have your HTML and CSS setup. And the way your calling GSAP. But these types of issues can be resolved by changing your CSS and the way your creating your tweens.

 

Usually its best to share with us a limited or reduced codepen example that just shows the issue your having. Since its really hard for us to try and debug all your code HTML, JS, and CSS.

 

Below are some helpful video tuts on how to use GSAP to sequence your tweens.

 

 

 

 

And how to setup a limited codepen demo example:

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

:)

  • Like 4
Link to comment
Share on other sites

Welcome to the forum. GSAP is a massive library and could be daunting if you start cold.

But don't worry this forum is one of the best around with some amazing contributing coders.

 

Check out this previous post from Carl on this very type of animation

http://greensock.com/forums/topic/11441-slotmachine-with-js-and-gsap/?p=46464

It shows a version of a slot machine by Chris Gannon that uses GSAP.

 

Also, if you are new to GSAP check this out too.

http://greensock.com/get-started-js

 

Hope this helps

- Patrick

  • Like 4
Link to comment
Share on other sites

Hi and welcome to the forums.

 

Sorry to hear you have hit some stumbling blocks.

I can assure you that GSAP is extremely stable. However, you did run into one known bug that was recently patched.

 

The suppressEvents param for progress() was missing in TweenMax (but not TweenLite).

 

You can use this pre-release version of TweenMax in your pen

 

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js

 

As others have stated, the more you can reduce your demo to isolate the issues the better. For instance if a paused tween is mysteriously playing just try to remove everything not related to us seeing that. it can be pretty tough walking into 100+ lines of code blind.

 

We will do out best to help you.

  • Like 4
Link to comment
Share on other sites

You're right about the malformed code, my link to my codepen was wrong, that was my early version that I edited but apparently the changes didn't get saved.  

 should be the right link   :(

 

I have read the documentation and my usage of how I create the animations is copied from your demos.  I didn't use timelines because I only needed two animations, and I felt using a timeline was overkill.  I will look at the code of another guy making a slot machine, thanks for that.  The codepen is as simple as I can make it.

So I found a known bug and have to use the beta version and B) I can't use absolute positioning in my CSS.  Got it.  This actually does help.  Thanks, you guys rock.

 

Link to comment
Share on other sites

I tried looking at your code again, and unfortunately I'm having a tough time trying to figure out how you expect it to work. It doesn't mean its wrong or bad... it's just not easy to decipher with fresh eyes.

 

You have a note that says nothing should be moving at start

 

That goes back to the fact that progress(1, true) was not suppressing events and thus the onComplete was firing which was calling this.restart().

If you use the fixed copy of TweenMax you will see the animation does not restart when you set progress(1, true)

See: http://codepen.io/GreenSock/pen/wMbdpe?editors=0010 and the demo has no animation.

 

Also, I don't think you should be creating 2 tweens on the same element at the same time that try to control the same properties but at different speeds. With GSAP you can just create one tween and control it's timeScale(), you can even it tween it:

 

Please see this demo:

http://codepen.io/anon/pen/JGqNKz

 

I'm not saying that is the way I would set up a slot machine exactly, but tweening the timeScale() is a very powerful concept and I think it can help you here.

 

If you find any more bugs, please let us know. We certainly want to address them and fix them! Again, it helps to see them as isolated as possible. For future reference the progress() bug could have been illustrated with a simple demo like: http://codepen.io/anon/pen/XXwRYG?editors=0010. No need for all the slot machine code and logic. 

  • Like 3
Link to comment
Share on other sites

  • Solution

I finally figured it out.  I have a tween of length 0, and I was setting its progress to 0.  I expect setting progress to 0 to jump to the START of the animation.  instead it was jumping to the END of the animation.  

See the Pen WrBmEa by dax006 (@dax006) on CodePen

 

My apologies for the confusing question, I was trying to solve three separate problems in one question.  You guys pointing out the known bug made me turn my tweenMax's into tweenLites, and then the other problem became clear.  So I couldn't have solved it without you, thank you!
 

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

Hi and welcome to the forums.

 

Sorry to hear you have hit some stumbling blocks.

I can assure you that GSAP is extremely stable. However, you did run into one known bug that was recently patched.

 

The suppressEvents param for progress() was missing in TweenMax (but not TweenLite).

 

You can use this pre-release version of TweenMax in your pen

 

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js

 

As others have stated, the more you can reduce your demo to isolate the issues the better. For instance if a paused tween is mysteriously playing just try to remove everything not related to us seeing that. it can be pretty tough walking into 100+ lines of code blind.

 

We will do out best to help you.

 

Was bit by this bug this morning.  Checked the github issues, did not see it listed there.  Is there a central location where developers can find "hotfixes" like this without digging through the forums?  Much thanks.

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