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

What started out as a simple replacement of a jQuery .hover() function with native javascript has turned into to a roadblock for me. I am replacing a simple hover tween with the native onmouseenter/onmouseleave in a javascript function I have created. The function is approximately 1000 lines of code so it took some time to break out the components into codepen to demonstrate my problem: If you review the codepen, I have a function in the global namespace that takes options from the user to set certain callbacks or hooks. Using the original jQuery .hover() function produces the results I want. The replacement in native javascript does not. However, note that the last 2 buttons use the replacement javascript successfully except the tween is defined at the same scope and does not go through the user hook. If anyone can explain to me why the jQuery function works through the hook while the javascript function does not, I would appreciate it. Also note that the javascript object returned by the tween is different between the 2.

Blake, even though the example on codepen works, it still does not work in the context of my entire script. The only difference between the codepen example and my script is the "buttonHighlight" function is defined through an object property/user defined callback function. The thing that really bugs me is the old jQuery code works fine with the "buttonHighlight" function which makes no sense to me. I may have to put in a codepen example that duplicates my script but it will take some time to do it. Do you have any suggestions on how I can trouble shoot this? Thanks, James

Blake, thanks. I knew it was something simple. Thanks for the link to http://youmightnotneedjquery.com/.

I have the following code that works fine using jQuery. I would like to replace it with native javascript but my javascript replacement does not work. I figured there is something simple I missed in my translation but at this point I just can not figure it out. Any assistance would be appreciated. var buttonHighlight = function (button) { var animation = TweenLite.to(button, 0.3, { backgroundColor : "#B18D89", ease : Linear.easeNone, paused : true }); return animation; }; jQuery(".button").each(function () { this.animation = buttonHighlight(this); jQuery(this).hover(function () { this.animation.play(); }, function () { this.animation.reverse(); }); }); Below is the javascript replacement that is not working: [].forEach.call(document.querySelectorAll(".button"), function () { this.animation = buttonHighlight(this); this.addEventListener("onmouseenter", function () { this.animation.play(); }); this.addEventListener("onmouseleave", function () { this.animation.reverse(); }); });

Shaun, thanks. I knew there was something simple I was missing.

I have a simple demo at the linked Codepen where I would like to create 50 bubbles at random locations on the screen and animate the size and opacity. So far, no problem. I would like to add another animation after the initial animation but cannot get it to work correctly because of the random nature of my repeat & delay times. The problem code is marked as such. Any suggestions. http://codepen.io/hackfin/pen/vLZJzQ

Carl, I haven't even addressed the initial (or closing) display effects other than a simple fade but I will definitely try a couple of effects. Maybe what I should do is turn all of the animations into callback functions like follows: onDisplay onHide onButtonMouseOver onRenderText This would obviously keep the size down on the plugin while offering the user the most flexibility. What are your thoughts?

For fun I modified an old jQuery plugin I wrote to create modal dialog boxes so I could try out some of the new features in GSAP 1.18. My goal was to create a plugin with the following features: Automatic sizing regardless of dialog contents. All the standard features you would expect from a dialog plugin. GSAP animation using splittext and cycle. A simple method to change the coloring scheme of the dialog without changing the underlying css or requiring a complex string of styling options. To achieve this I utilized the relative HSL feature. So far, I am pretty happy with the results so I thought I would share it with the community. Feel free to fork any improvements, additions, or corrections. If anyone finds this usefull, let me know and I will add it to Github as a jQuery plugin once I have had a chance to review and finalize the javascript. I also attached the js file for the plugin since the js on Codepen is minified. http://codepen.io/hackfin/pen/mVwywQ alphaDialogCodepen.txt

For those of you interested, I published my final example at the codepen address below. It demonstrates draggable items with dynamic target cells inside a grid. Invalid drops reset the drag. http://codepen.io/hackfin/pen/PwroPp

Diaco, I tried .hitTest() and could not get it to work. When I saw var targets = $(".gridCell"); I realized were I went wrong to begin with. Thanks for your help.