hackfin

Thanks, I knew it was something simple. I ended up going with a more complex "update" type solution so that I could incorporate the draggable hit test on a dynamic list of acceptable drop sites that changes on each circle selected. It is working great now but I may have one last question on another issue I am trying to overcome.

The linked pen is a simple use case of draggable that appears to work in all aspects except one. The svg elements that are dragged will not display above any of the other elements making it impossible to determine where the cursor/drag is on the screen. The drop logic appears to work fine and there are no errors reported. Even though it is built into gsap, I tried messing with the z-index of the svg elements to no avail. I have a feeling the answer to this is simple. I just cannot figure it out.

Rotating 90.01 does not seem to help. Is it possible that using an SVG arrow or even a square div with 2 side borders would improve the clarity? I will try a couple of other methods to see if it corrects this issue. I will report back my findings.

Although it is hard to see, I have a slight blur in one of my rotation animations. If you look at the codepen accordion I created, the arrows that indicate whether a panel is open are rotated when a panel is clicked. You should notice a slight blur as the arrow is rotated. Is there a method to setup this animation so that this does not happen or is this a byproduct of using a font-awesome icon as an animated element? Any suggestions would be appreciated.

That was it. I knew it had to be something simple. Thanks for your help!

I am working on a simple vertical accordion menu and I noticed that the animations that I created run much slower the first time they are triggered and the correct speed every subsequent trigger. Is there something obvious that I am missing or is my javascript just hosed? Any help is appreciated.

Carl, looks like onCompleteParams is my new best friend. That did the trick and everything is now working as expected. The multi progress bar in my codepen was my ultimate goal. Thanks for your help!

I will try and make it simple and re-post. The progress bar rate is a user setting that I slowed down on purpose to demonstrate the issue. Until then, do you have any good examples on codepen using onCompleteParams? I am still a novice when it comes to Greensock. Thanks!

I wrote a simple module to demonstrate the use of a progress bar for downloading files or other server side events. Everything works as expected except for the timing of the "onComplete" callback attached to the tween. It appears to execute the callback at the beginning of the animation instead of the end. I'm sure the issue is with my code but I do not understand why it is happening. To view the issue, press any of the buttons on the codepen page. I attached an alert at the very end of the progress bar (100%) that freezes the animation. Note the values of the header text, footer text and bar text.

Thanks to all. I figured out my issue with my setTimeout function and updated the codepen.

I am working on a progress bar demonstration that simulates the downloading of multiple files. To simulate the time it takes to download each file, I created a random time between 1 and 5 seconds as the lag between each tween. Either the function that creates the lag or one of my methods that creates the tween seems to be the problem. At this point, I have looked at it for such a long time that I just can not figure it out. Any assistance or advice would be appreciated. See the codepen link for a demonstration of the issue(s). Thanks, James

I have finalized this project and published it on GitHub. The javascript plugin creates a modal dialog box that is easy to style and animate using the GreenSock library. For the animations, the user has 6 hooks available so that the user can create their own animations. The user can animate: the overlay button hover close icon hover message text display of the dialog closing of the dialog. If you are interested, contributors are always welcome. I am still wet behind the ears when it comes to GreenSock and welcome any criticism. The main webpage for the project with examples can be accessed through the link below: http://dbs6.github.io/StyleBox/

In the documentation under the tweenLite.paused() method it states "You can set the paused state initially by passing paused:true in the vars parameter. I assumed it meant the vars parameter of the tweenLite.to() since tweenLite.paused() does not have a var parameter. Is this a typo in the documentation or did I read this wrong?

I am testing an animation through Google Chrome which currently is not working. I do not receive an error but the console log reports "invalid pause tween value: true". In general, what does this mean? I searched the forums and did not find any topics on this message so I though I would go ahead and ask. If it helps, below is my code for the tween: var fadeOut = function (el) { var animation = TweenLite.to(el, .75, { autoAlpha : 0, bottom : "-=100px", ease : Linear.easeNone, paused : true }); return animation; };

Tahir, thanks. Unfortunately that means I have not entered enough of my code into codepen to reduplicate the issue. I will adjust my codepen and post back when it is ready (broken).