jamiejefferson

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.

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.

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

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();

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(); });

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

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 }));

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.

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.

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.

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

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)' });

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; }

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

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" }