hackfin

BusinessGreen
  • Content Count

    34
  • Joined

  • Last visited

Community Reputation

6 Newbie

About hackfin

  • Rank
    Advanced Member
  1. hackfin

    Blur in Rotation Animation

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

    Blur in Rotation Animation

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

    Initial Speed of animations

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

    Initial Speed of animations

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

    TweenLite onComplete not working as expected

    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!
  6. hackfin

    TweenLite onComplete not working as expected

    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!
  7. 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.
  8. hackfin

    Progress Bar Example not Working Correctly

    Thanks to all. I figured out my issue with my setTimeout function and updated the codepen.
  9. 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
  10. hackfin

    Modal Dialog Box Using GSAP, Cycle & Splittext

    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/
  11. hackfin

    invalid pause tween value: true

    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?
  12. hackfin

    invalid pause tween value: true

    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; };
  13. 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).
  14. 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.
  15. hackfin

    Simple Question on Tweening button css on hover

    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