jamiejefferson last won the day on January 11 2015

jamiejefferson had the most liked content!

jamiejefferson

BusinessGreen
  • Content count

    903
  • Joined

  • Last visited

  • Days Won

    134

jamiejefferson last won the day on January 11 2015

jamiejefferson had the most liked content!

Community Reputation

1,181 Superhero

About jamiejefferson

  • Rank
    Moderator
  • Birthday September 22

Profile Information

  • Gender
    Male
  • Location
    Australia

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. jamiejefferson

    Live jQuery Elements

    Yea that code doesn't give much of a picture of what's actually going on (it's just tweens, not what's interfering with them). Here's two examples to show the behaviour I think you're seeing Correct: http://codepen.io/jamiejefferson/pen/ogBOOV Incorrect: http://codepen.io/jamiejefferson/pen/zxNXXa If the page is being modified in the "incorrect" way, then the tween has lost it's reference and can't be used anymore. You will need to create new tweens of the new elements to replace it.
  2. jamiejefferson

    Live jQuery Elements

    It sounds very much like the element is becoming dereferenced. This usually happens when you modify innerHTML that contains the element. Even though the element may still 'exist' after the modification, any references to it are lost and new ones must be made. You're probably going to have to reconsider how the side-cart is updated, or rebuild your tweens when you do so. It becomes quite time consuming to investigate a complex site like this so it's difficult to allocate enough time to dive into your full project. Please consider creating a reduced Codepen demo that shows the issue so we can resolve it quickly.
  3. jamiejefferson

    How to optimize TweenLite on scroll?

    Also consider throttling the scroll events which can alleviate some performance issues. benalman.com/projects/jquery-throttle-debounce-plugin/
  4. jamiejefferson

    Delay when using Tweenlite.to?

    It's not a bug; GSAP can't just 'ignore' a CSS rule. Every frame of the animation GSAP updates the style for left, and then you have CSS telling the browser to apply that change over 0.3s. Removing the transition is the correct fix for this. If you have not saved your own reference to the tween e.g. var mytween = TweenLite.to(foo, 1, { bar: 0 });then it will be automatically released for garbage collection at an appropriate time. If you have kept your own reference, you can kill it with mytween.kill();
  5. jamiejefferson

    GSAP - hover one element animate another

    Yea the only issue here seems to be with the jQuery/mouse events. You were right, it's quite simple to target a different element than the one you are hovering. var t = TweenMax.to('#elem1', .3, { opacity:0, paused:true }); $("#elem2").on("mouseenter", function() { t.play(); }).on("mouseleave", function() { t.reverse(); });
  6. jamiejefferson

    NS_ERROR_FAILURE with TweenMax, SVG and Firefox

    Glad you figured it out. There's an old issue in Firefox that's responsible for this https://bugzilla.mozilla.org/show_bug.cgi?id=612118
  7. jamiejefferson

    onComplete for all tweens

    GSAP does not use a generic event system, just callbacks, so there isn't anything like you're asking for sorry. GSAP is developed with high performance in mind, and for the majority of use cases callbacks suffice, so it was decided that it wasn't worth the added file size and loss in performance. We're always interested in understanding the way users are using GSAP however, so if you'd like to add more explanation to why you want to do this in your project then the developers will at least have something to take into consideration. If you really need to run an onComplete on every tween, something like this might be worth trying function vars(v) { v.onComplete = myFunction; return v; } TweenLite.to(element, 1, vars({ x: 100 }));
  8. jamiejefferson

    Changing repeat delay

    Hmm this is an interesting problem. The issue you had with your first example is that a timeline can only exist once in one parent timeline. Similarly var parentTimeline1 = new TimelineMax(); parentTimeline1.add(timelineToRepeat); var parentTimeline2 = new TimelineMax(); parentTimeline2.add(timelineToRepeat); would result in timelineToRepeat only existing in parentTimeline2. One feature of GSAP we can leverage to achieve this (without creating 3 duplicate timelines) is to create tweens of the timelines. var parent = new TimelineMax({repeat: -1, repeatDelay: 2.58}); parent.add(timeline.tweenFromTo(0, timeline.duration()), 0); parent.add(timeline.tweenFromTo(0, timeline.duration()), 3.67); parent.add(timeline.tweenFromTo(0, timeline.duration()), 6.17); Each call to tweenFromTo() creates a new TweenLite that will scrub the playhead of 'timeline' from start to end. Since it creates 3 separate tweens, they can all co-exist inside the parent timeline. Note that 'timeline' was not added as a child of the 'parent' timeline. If a timeline is a child of another timeline, its playhead is locked to the parent's playhead which would prevent the effect we're creating here. You can read more about tweenFromTo() here.
  9. jamiejefferson

    Problem animating decimal percentages

    It certainly seems like you're reporting a legitimate bug here. It occurs with other units too e.g. "50.50px". Looks like there's a small error in the value parser. Once the big guy sees this I'm sure he'll be able to weigh in.
  10. Ok, so what's in playSound then? It will block all other JavaScript execution (including GSAP) until it's completed. add() and addCallback() aren't pausing the timeline, it's playSound that is taking too long (too many loops perhaps?). This isn't a GSAP specific issue by the way - all JavaScript is single threaded. There's not a lot more we can say about a function we know nothing about.
  11. Javascript is single threaded (without using Web Workers) so you can't do 2 things simultaneously. If playSound is taking a long time then GSAP has to wait for the single thread to get back to it. What is in your playSound function that's taking so long? I hope it's not that sleep function from the Codepen...
  12. jamiejefferson

    Why does this ColorProps example not work?

    You haven't included the ColorPropsPlugin in the page e.g. http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ColorPropsPlugin.min.js Not sure if this is just your example or what you intend to tween, but this would be simple to write as TweenMax.to(document.body, 5, { backgroundColor:'rgb(255,255,255)' });
  13. jamiejefferson

    Rotation Snap

    function getEnd(endValue):Number { var rotationSnap:Number = 30; return constrainNumber(Math.round(endValue / rotationSnap) * rotationSnap, 0, 360); } function constrainNumber(n:Number, min:Number, max:Number):Number { if (n < min) n = min; if (n > max) n = max; return n; }
  14. jamiejefferson

    Mixing in HTML5 video? Possible?

    Mr Pablo seemed to agree in post's 10 and 12 that this example codepen.io/jamiejefferson/pen/uefco was helpful to him. Maybe it's not the clearest demo though, so I've made it a bit simpler here: codepen.io/jamiejefferson/pen/dPOeRL
  15. jamiejefferson

    DropShadow code ?

    The correct syntax (this is the actual CSS syntax) uses spaces not commas to separate the values. { boxShadow:"35px 45px 56px #FF5050" } Commas are used for multiple shadows { boxShadow:"35px 45px 56px #FF5050, 1px 1px 1px #FFFFFF" }