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

There is no documentation on report() because that's a custom function you create as a callback for the tween's onStart (which is documented). Jack called it report in his demo, but you can call it whatever you like - it's your function. The code I provided is correct. If it's not working for you, please provide a demo of the code from my post not logging "tween one" to the console, and please make sure there are no errors in the console first. If you are using Internet Explorer, the F12 tools must be open when the page loads to make sure everything logs correctly. IE does not save console history when the tools aren't open.

As per the explanation of functions and parameters here, you have to use the parameters of the functions that are defined in the API. The 4th parameter of a .to() tween does not accept more vars. As per the API for TweenLite.to() here, the 3rd parameter vars includes all special properties of the tween: As both GreenSock and Rodrigo have said, you access the data of a tween in a callback with this.data, not logo.data. logo.to(".proxylogo", 2, {skewY:45, skewX:90, onStart:report, data:"tween one"}); function report() { console.log(this.data); }

x and y are transforms, and always relative to the element's position. If you want an absolute position, you can add position:absolute; top:0; left:0; to the element (and make sure the correct parent has positioning as well), then x/y should behave should behave the same way as a top/left absolute positioning. TweenMax.to("#LetterG", 1, {x:640, y:480, ease:Quad.easeOut});

Again, please see this post for links to the different browser consoles. Errors like this are easily discovered there. We go to a lot of effort to include good, helpful information in our responses here, and it's disheartening to see a lot of it being overlooked. An error like: "Uncaught ReferenceError: TimelineMax is not defined" means that TimelineMax is not accessible to JavaScript. In the case of including a library like GSAP, this would usually indicate that a required file has not been included. As Diaco mentioned, the TimelineMax.js file alone is not enough. TweenLite is a minimum requirement for GSAP, and CSSPlugin is a requirement for tweening DOM elements. In most cases, it is very much recommended to just include the TweenMax.js file, as it contains all of TweenLite, TweenMax, TimelineLite, TimelineMax and CSSPlugin, in a very small file.

Please, please read the previous post again. I highlighted the explanation of the start/end values in red so that you don't miss it this time. All 3 functions (to, from, fromTo) have different behaviour regarding start and end values. It just depends on how you want to create your tween on which function you use. The values that are read from the target include both the styles set in any CSS files and the style tag of the element. Please reread this post where the target of a tween is explained again. All of this time target has referred to the element that is the target of the tween. The values that are read will be the CSS/style values of the target (assuming you are tweening a CSS style) And finally view this simple demo of all three methods being used to create the same effect codepen.io/jamiejefferson/pen/wBoGBr ------------ It's frustrating for us (and I'm sure for you too) that nearly a week later we are still circling around the simplest functions in GSAP. If my explanations are not clear enough for you, then I'd like to suggest that you go through the Jump Start guide and Getting Started guide again in case some of their information has been misinterpreted or passed over.

I explained all of the toVars and fromVars as clearly as I could in this post: http://greensock.com/forums/topic/11104-tweening-a-div-between-multiple-css-properties/#entry44700 Yes. The start values in a .to() are read from the target's CSS styles. The start values in a .fromTo() are defined in the fromVars, not the toVars. In a .to() tween you define the end values, and the start values are read from the target. In a .from() tween you define the start values, and the end values are read from the target. In a .fromTo() tween you define the start and end values. No values are read from the target. It's really designed to be as clear as possible: TweenLite.to(target, 1, { left: 10 }); // tween target's left property "to" 10 TweenLite.from(target, 1, { left: 10 }); // tween target's left property "from" 10 TweenLite.fromTo(target, 1, { left: 0 }, { left: 10 }); // tween target's left property "from" 0 "to" 10 We've explained this in so many ways I'm not sure how else to explain it.

I'm curious to know your understanding of the concept of a tween at this point. At the fundamental level, it's just an animation of a property between 2 values. It animates from a start value to an end value. That's really all there is to it. The different methods available just depend on whether you know the start values, the end values, or both for the tween you are creating. Carl provided an example using colors here: http://greensock.com/forums/topic/11104-tweening-a-div-between-multiple-css-properties/#entry44668 Blake had a very clear example using travel here: http://greensock.com/forums/topic/11104-tweening-a-div-between-multiple-css-properties/#entry44679 I'll make you another... We have one div: <div id="example" style="width:0px;"></div> We have one tween: TweenLite.to("#example", 3, { width: "200px" }); This is going to tween #example's width. When the tween begins, it reads the start values from the target (#example). The width is currently 0px, so the start value is 0px. Because it is a .to() tween, the end value is what was provided in the tween's vars object. The end value is 200px. The tween will spend 3 seconds tweening (animating) #example's width from the start value of 0px to the end value of 200px. Here is a demo of this in action codepen.io/jamiejefferson/pen/KwNVwa

Let's just ignore timelines and chaining for one moment. I just want to go over some fundamental knowledge of how JavaScript works so you can come to some understanding of this without half of everything being said becoming lost in transmission. We usually assume some level of pre-existing JavaScript knowledge and don't delve into these low-level explanations, but these threads are going on forever so it's clear that something is missing here. ---------------- In JavaScript, a set of uniquely named property/value pairs is called an Object (described by Blake as a set), and looks like this: { foo: 10, bar: true }There is no real limit to the number of properties in an object, but an Object cannot have multiple properties with the same name. { foo: 10, foo: 99, bar: true } // THIS IS NOT ALLOWED ---------------- A Function is a pre-defined sequence of instructions. It can operate on certain values passed to it's parameters. The type, and number, of parameters a Function is designed to handle is usually documented in its API. Sending values in more parameters than the Function is designed to handle is usually pointless, as these will be ignored. ---------------- Now, from the API: TweenLite.to( target:Object, duration:Number, vars:Object ) This function takes 3 parameters in total. target: a standard Object, a DOM element, or a selector String. duration: any number 0 or greater, defined in seconds vars: an Object that contains all of the different properties to be tweened. The values of each property in vars will be the "end values" when this tween finishes. The "start values" will be the current values read from the target when the tween begins. ---------------- TweenLite.from( target:Object, duration:Number, vars:Object ) This function takes 3 parameters in total. target: a standard Object, a DOM element, or a selector String. duration: any number 0 or greater, defined in seconds vars: an Object that contains all of the different properties to be tweened. The values of each property in vars will be the "start values" when this tween begins. The "end values" will be the current values immediately read from the target. ---------------- TweenLite.fromTo( target:Object, duration:Number, fromVars:Object, toVars:Object ) This function takes 4 parameters in total. target: a standard Object, a DOM element, or a selector String. duration: any number 0 or greater, defined in seconds fromVars: an Object that contains all of the different properties to be tweened. The values of each property in fromVars will be the "start values" when this tween begins. Must contain all of the same properties defined in toVars. toVars: an Object that contains all of the different properties to be tweened. The values of each property in toVars will be the "end values" when this tween finishes. Must contain all of the same properties defined in fromVars. ---------------- I'm not going to write out these functions for TimelineLite as well, but they are the same as above, with the addition of 1 more parameter: position. It may be used to modify the start time of the tween. If this parameter is sent no value (as it has been in our discussion so far) then the start time of the tween will be at the end of the current timeline. Any further discussion of position can wait until you understand the behaviour of the 3 functions above. ---------------- Now, your question should really be answered by all of that, but I'll reiterate it again to make it perfectly clear. There are no real limits to the number of different properties defined in each tween as long as you obey the GreenSock API. You can have as many properties as you want in a "set", but you can only send as many sets as each Function is designed to handle.

I have a feeling you might be doing some local development without running a server? e.g. file:///C:/mysite/index.html The file protocol has some pretty restrictive security policies so it's not generally advised to develop this way. A WAMP stack is usually the way to go. I'm a XAMPP user myself.

Hmm, it's a pickle. Are you using the latest GSAP and CSSRulePlugin? What OS and browser are you seeing this behaviour? If you're using other Javascript libraries for your site, have you tried a clean page with just GSAP and no other libraries on the page? Just trying to work out if there is a browser issue, compatibility issue, or bug in GSAP causing this. It's harder to pinpoint an error from the console when you're using the minified file. It's recommended to only use minified files for production sites, and use the original JavaScript during development for easier debugging so you can pinpoint the offending code easily. Lastly, could you set up a reduced Codepen or other online demo so we could take a look? For example, here's a working Codepen of a CSSRulePlugin tween codepen.io/jamiejefferson/pen/ibHAt