jamiejefferson

to() tweens between the current values and "end values" passed as the 3rd parameter. The current values are determined at the point the tween starts, so in the case of a chain of tweens (of the same property) in a timeline, the "start values" for a to() tween should be the "end values" of the previous tween. fromTo() tweens between "start values" passed as the 3rd parameter and "end values" passed as the 4th parameter. These functions are covered by the learning materials you have been directed to, the API documentation, and have been explained more than once before http://greensock.com/forums/topic/11099-tweening-div-between-two-css-properties/#entry44613 http://greensock.com/forums/topic/11099-tweening-div-between-two-css-properties/#entry44635 --- overwriting is described in the Getting Started guide and in the Special Properties section of the TweenLite documentation. When a tween is created that conflicts with an existing tween, the existing tween is overwritten when using the default overwrite mode. --- A lot of effort was spent creating learning materials to make it easier for new users like yourself to learn GSAP's fundamentals. You haven't indicated if you've been through these yet so at this point I can only assume you still haven't. If you have been through all of it though, and are still having difficulty understanding the common functions of GSAP please let us know, as it would appear they are failing in their task at introducing the very basics.

Please see the updated fiddle here: jsfiddle.net/dLahxcta/9/ You had the fromTo function on the wrong tween, and the misspelling of fromTo as Fromto caused a JavaScript error. Again, the console provides a very simple way to detect these kind of errors and I really do recommend you make yourself familiar with it. Even if you aren't able to understand the error's output, just being able to see that there is one in the console can instantly let you know that something has gone wrong with the JavaScript. It (usually) even lets you know the exact line that caused the error. Once this is corrected all 5 tweens are correctly placed in the timeline, one after the other. You can use relative offsets or absolute positions to adjust positioning as you like, but be aware that overlapping tweens with conflicting values (e.g. both tween skewX) will be overwritten by default.

It's not important if it's jsfiddle or Codepen, as long as we have a live demo; somewhere easy to make changes and it's fine. With this it took me 2 seconds to discover you hadn't included any GSAP files in your fiddle. Please add cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js to the external resources in the fiddle and you'll see the box skewing as instructed. I would recommend you get acquainted with the JavaScript console as these sorts of errors are very easy to spot there Internet Explorer Firefox Chrome GSAP does not change the behaviour of semi colons in Javascript (it's impossible to do so). There are, I suppose, two ways to write GSAP code - one statement per line, or using method chaining. var tl = new TimelineLite(); tl.to(foo, 1, { bar:1 }); tl.to(foo, 1, { bar:2 }); tl.to(foo, 1, { bar:3 }); // with method chaining tl.to(foo, 1, { bar:1 }) .to(foo, 1, { bar:2 }) .to(foo, 1, { bar:3 }); // or even tl.to(foo, 1, { bar:1 }).to(foo, 1, { bar:2 }).to(foo, 1, { bar:3 }); Most functions in GSAP return the same timeline instance so you can instantly call another function without needing to end the statement and refer to the timeline variable again. It's not required, just a coding style. If it's confusing for you then just stick to one statement per line and avoid the method chaining; it won't affect your timeline.

If you add the line return tl; at the end of each logo function, then master.add(logo()) .add(logo2()) .add(logo3()); will work as I believe you are intending.

The particles in this demo are just divs with class="dot" for (var i = dotQuantity - 1; i >= 0; i--) { dot = document.createElement("div"); dot.className = "dot"; TweenLite.set(dot, { xPercent:-50, yPercent:-50, force3D:true }); document.body.appendChild(dot); dotPool[i] = dot; }

Is it your intention for this animation to last several minutes? Duration is written in seconds, so those durations are quite large. The "no variable" version isn't working because you aren't using the syntax correctly. 1. TimelineMax does not have static methods for you to use in that way. They only exist on created timeline objects (hence the variable). If you really want to avoid a variable you could chain everything together e.g. new TimelineLite().to(target, 1, {skewY:"1px", skewX:"2px"}) .to(target, 1, {skewY:"34px", skewX:"12px"}) .fromTo(target, 1, {rotation:50}, {rotation:90}) 2. If you modified it to just use TweenLite then it would work, but all of the tweens would be created at the same time and many of them would be overwritten.e.g. TweenLite.to(".proxylogo",24,{skewY:"1px",skewX:"2px"}) TweenLite.to(".proxylogo",12,{skewY:"34px",skewX:"12px"}) // overwrites previous tween TweenLite.fromTo(".proxylogo",34,{rotate:50}) This can be solved with delays, but Timelines are designed to make this easier 3. You still aren't using fromTo correctly TimelineMax.fromTo(".proxylogo",34,{rotate:50,rotate:90}); // an object can't have two identical values, and "rotate" should be "rotation" // corrected: TweenLite.fromTo(".proxylogo",34,{rotation:50}, {rotation:90}); TimelineMax.fromTo(".proxylogo",60,{skewX:"50px"}); // fromTo requires both from and to vars // corrected: TweenLite.fromTo(".proxylogo",60,{skewX:"50px"}, {skewX:"17px"}); Your variable version likely isn't working because of the Javascript error in the first line var logo = new TimelineMax ({repeat:2;}); // extra semi-colon should not be here ^ To wrap up, your code should work if it looks something like this (it's going to be a weird effect but I'm assuming they are just test tweens): var logo = new TimelineMax({repeat:2}); logo.to(".proxylogo", 24, {skewY:"1px", skewX:"2px"}) .to(".proxylogo", 12, {skewY:"34px", skewX:"12px"}) .fromTo(".proxylogo", 34, {rotation:50}, {rotation:90}) .to(".proxylogo", 60, {skewX:"50px"}); If you are still having issues with this, please create a Codepen demo so we can see the code in context and provide a quick solution.

As per the documentation for TweenMax you will see it only takes 4 parameters - target, duration, fromVars, toVars. I'm not sure where you've seen that syntax before but that isn't valid usage of the fromTo function - it creates a singular tween, from one set of values to another. I believe your intention is best solved with a Timeline. Something like this will give you a chained set of tweens, and you can modify timings and durations from there var target = $(".proxylogo"); var tl = new TimelineLite(); tl.to(target, 1, {skewY:"1px", skewX:"2px"}) .to(target, 1, {skewY:"34px", skewX:"12px"}) .fromTo(target, 1, {rotation:50}, {rotation:90}) .to(target, 1, {skewX:"50px"}) .fromTo(target, 1, {rotation:-25}, {rotation:32}) .fromTo(target, 1, {rotation:160}, {rotation:200}) .to(target, 1, {skewY:"-24px", skewX:"50px"}) .fromTo(target, 1, {rotation:12}, {rotation:45}); I think you will find this introduction to GSAP useful to get up to speed with the basics of the GSAP syntax.

I'm not sure I understand the effect as you describe it, but I'm certain it would be possible. If we can make generic particles and tween them I see no reason you couldn't make SVG particles or whatever else you have in mind and tween those. If you give it a try let us know how it goes.

If you have multiple end values, that's already been answered TweenMax.to(".proxylogo", 12, {left:"100px", rotation:80}); If you know both start and end values to tween between you would use fromTo TweenMax.fromTo(".proxylogo", 12, {left:"0px", rotation:0}, {left:"100px", rotation:80}); If that doesn't answer it for you, can you provide more description of the tween, or better yet provide a Codepen sample showing the tween not doing what you intend?

It's right there in the title of this topic, and in the code comments: // convert cubic data to GSAP bezier The path data from the SVG is a string (which may not be a cubic bezier path), so it needs to be converted to cubic bezier points, and then arranged into the format used by the BezierPlugin. The documentation for BezierPlugin describes an autoRotate property which orients the object to the path.

Because it's not valid JavaScript. JavaScript values are String, Number, Boolean etc. Complex values like "+=60", "5%", or "100px" have to be written as strings.

By the way, I have a feeling I've discussed this in another thread somewhere, but the reason I recommend a Timeline as a good analog for setInterval (instead of delayedCall) is that it prevents drifting over time. e.g. Let's say our interval function takes a variable time between 0.2s and 0.4s to run, and the interval time is 1 second: with Timeline or setInterval ( |** = function running ): 0 1 2 3 4 ------------------|****-------------|******-----------|********---------| no matter how long the function is taking, it doesn't affect the fact that you've asked it to be called once per second. The exact point that it is called can be slightly variable (probably off by a few ms based on the CPU time given to the browser and JavaScript), however the general idea is that in 10 000s the function should be called 10 000 times. with recursive delayedCall or setTimout: 0 1 2 3 4 5 ------------------|****-----------------|******-----------------|********-----------------| as you can see, by running the function, then saying "ok do this again in 1 second", there is a lot of room for time drift to occur. My example is exaggerated for effect, but this still occurs at smaller scales. Now, in your Timeline you had the call duration as 0.02; that only gives 20ms for both the function to run and any browser layout/painting operations to occur before that function is called again. I imagine that Chrome is just not keeping up with all of that. When you change it to the delayedCall then restart version, you've now got infinite time for the function and browser layout/paints, then patiently wait for 20ms and do it again. Up to you if this drift is important to your animation or not. I would however recommend this improvement var offset = elem.offset(); TweenLite.set(elem, { left: offset.left + (goalX - offset.left) / moveSpeed }); as calling .offset() one less time per frame could improve performance, and using TweenLite to set the values allows them to be synchronised with the GSAP ticker, so you don't end up pushing more layout adjustments than the browser can keep up with. The next recommendation would be to consider using x/y transforms as they may improve performance by reducing layout thrashing (especially if you have lots of elements) and offloading some rendering to the GPU. var offset = elem._gsTransform || 0; // || 0 just in case _gsTransform hasn't been set yet TweenLite.set(elem, { x: offset.x + (goalX - offset.x) / moveSpeed });

Sounds like your bubbles should probably be inside the submarine element that is being moved and scaled.

Here's another recent thread with a possible solution greensock.com/forums/topic/11038-jumpy-choppy-css-transform-animations/

I don't know how pronounced this jumping is, but they seem pretty smooth to me on Windows? Have you tried using an image at it's natural size rather than scaling down? Webkit is known to be pretty slow at image scaling, so perhaps that's a factor?

If you could provide a codepen in future, it makes it much easier for us to actually fiddle with the code and html on the page. Sounds like you already know what the problem is: your computer is just not powerful enough to play the animations smoothly. As it is your 3 or 4 tweens aren't as innocuous as they sound. They seem to include a 3840x560 image moving continuously. I have no idea what the PPI scale of the browser on this computer is, but for simplicity sake let's say it's 200% (i.e. 1 logical pixel per 2 physical pixels). That would equal a massive 7680x1120 element to constantly update. I'm not particularly surprised that it's a bit jumpy. How does it run if you remove this element?

I'm not an expert on perspective/perspective-origin etc, so I can't really explain how any of this works to you, but trial and error got me to this codepen.io/jamiejefferson/pen/XJddYg which appears to be pretty close to the effect I think you're after.

It's not a stupid question, but it probably needs more context than you've given. I've developed dozens of EPUB3 books that utilised GSAP animations and they worked very well, but I don't know anything about your project or what links you're asking about to really answer this yet. An EPUB3 is just a container of XHTML and JavaScript, so there's nothing to stop you using GSAP or any library you like as long as the reading program has decent EPUB3 support.

Ok, just to clarify what's going on here: it's as Rodrigo and Carl suspected. You were creating the 0 duration tweens "outside" of the timeline. When you create a TweenMax.to(), then .add() it to a timeline, that's two steps, and by the time the timeline is told to add() the tween, it's already been created and rendered the change (since it was 0 duration). The solution as you've found is to use the inbuilt .to(), .from(), .set() etc functions of timelines (with the benefit of having to write much less code). You could also modify the tweens to use immediateRender:false, which is what the timeline's built-in methods does for you. i.e. timeline.add(TweenMax.to(foo, 0, { bar: 1, immediateRender: false })) // same as timeline.set(foo, { bar: 1 })

In the console there is an error about one of your selectors "#slider. slideshow .show". Looks like the period needs moving The "show" class isn't applying unless you have one set to show at the start. The next/prev selector looks for a show element, removes the show class then selects the sibling of that element. If there is no show element to begin with, then there is no sibling to select. This bit of code if ( $("li").eq(2).css("show")=== true) { function dog(){ var dog = document.getElementById('dog_2'); TweenMax.to(dog, 2, {left:"325px", repeat:2, yoyo:true}); } }is just inside your document ready function. I would imagine you want this to trigger when your page changes. And even if this resolves as true, it just creates a dog() function, and doesn't execute it.

I have a different take on this, and just modified your function to: function newBox() { var newElement = $("<div id='b"+boxNum+"' class='box'></div>").appendTo("#boxes"); //random left variable var leftVar = Math.floor(Math.random() * 560) + 5; //set animation TweenLite.fromTo(newElement, 2, { top:-50, left:leftVar }, { top:460, ease:Sine.easeIn }); TweenLite.delayedCall(.5, newBox); boxNum++; }There were a few things to improve, but the only actual issue was with your innerHTML call. When you modify innerHTML it replaces the entire node with the adjusted HTML, which actually destroys the pre-existing elements replacing them with new ones (even if the id hasn't changed). GSAP loses it's target since it has a reference to the DOM element that no longer exists, not the id itself. Since you were using jQuery I just jQueryfied it, but you could also use function newBox() { var newElement = document.createElement("div"); newElement.setAttribute("id", "b"+boxNum); newElement.setAttribute("class", "box"); document.getElementById("boxes").appendChild(newElement); //random left variable var leftVar = Math.floor(Math.random() * 560) + 5; //set animation TweenLite.fromTo(newElement, 2, { top:-50, left:leftVar }, { top:460, ease:Sine.easeIn }); TweenLite.delayedCall(.5, newBox); boxNum++; }P.S. GSAP works well with jQuery objects, so you don't need to use the underlying DOM element for a tween target, a jQuery selection works just as well. Also you can just pass the selector string as your target and GSAP will do the jQuery selection for you // all work the same TweenLite.to("#target", 1, { ... }); TweenLite.to($("#target"), 1, { ... }); TweenLite.to($("#target")[0], 1, { ... });

Sure. This is using TweenLite's delayedCall() in the same manner as setTimeout(). It essentially says "in 2 frames, pause the a2 timeline". 2 / numCols is the time between each sprite frame, so 4 / numCols is the time between 2 frames. It just felt a little more natural to stop an extra frame later in this example. As per the docs on delayedCall, the 3rd parameter is for any parameter values for the function being called. Since we don't need to pass any values to a2.pause(), null is used to represent this.

Ah ok I see what you're working at now. What you had created was an empty timeline, and on every mouse scroll it would add a new 2 second tween to that timeline. Since the tweens would always be towards the same end values, after about 2 seconds it would appear to have "stopped" but really it's just playing a bunch of tweens to and from the same set of values. The first step would be to move the line creating the tween outside of your event, and just playing that timeline forward and backward. I've added 2 simple ways to get this kind of effect with different results. One has an "unlimited" speed, while the other respects the original speed of the timeline: codepen.io/jamiejefferson/pen/gbaExL

I can't see why not, but ScrollMagic isn't a GreenSock created product so we're not too familiar with all of its intricacies. We don't provide support for it, but we'll recommend people take a look at it since it seems useful for controlling tweens based on scroll position. Would you mind setting up a Codepen demo so we can see what you're trying and how we might get it to do what you want? P.S. I visited that puma site but it took ages to load and in the end it was just a video, so I'm not sure what I was meant to see there. I assumed there would be some scrolling animations but I didn't have 5 minutes to wait around looking for them.

ScrollMagic is a popular library for controlling GSAP tweens based on scroll position. I imagine it would be pretty useful for what you're trying. Examples ~ Documentation ~ GitHub