Rodrigo

Hi You could try using the engine's progress() method. Since you talk of a lot of elements, you can create the bezier path as an object and create a function to create the tweens or to add them to a parent timeline. The challenge comes on which tweens you want to stop before the path's end and where you want them to stop in the path. Maybe you could set up a fiddle or codepen in order to see with more detail what you're trying to achieve. Hope this helps Cheers Rodrigo

Hi, Basically this is a syntax issue. Right now you're passing a string through the constructor, like this: TweenMax.to(this, 1, {transform: "-webkit-rotate3d(-1, 1, 0, 360deg)"}); The engine does support strings but just to indicate units that aren't the default ones or tween relative values; for example if you want to animate an element's height in percentage you pass the string indicating the specific unit or if you want to enhance the element's current height by a number of pixels you pass a string indicating so. That's why your code is not working. In this case I'm presuming (Carl or Jack could confirm that) the string you're passing can't be used by the engine because in the case of CSS 3D transforms it works with the specific transforms functions. You can see those here: https://developer.mozilla.org/en-US/docs/Web/CSS/transform#Syntax Keep in mind though, that some of the properties have different syntax (once again Carl or Jack could explain that), so for instance instead of using rotateX, rotateY and rotateZ, the engine uses rotationX, rotationY and rotationZ. So your code will be the following: TweenMax.to(this, 1, {rotationX:-360, rotationY:360}); You can see it in action here: http://jsfiddle.net/YjVU4/2/ Also check the following links to see how the engines manages the CSS transform functions: http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html http://www.greensock.com/css3/ Hope this helps, Cheers, Rodrigo. PS: If you have more questions add a new reply to the topic, because if you edit a previous one it doesn't show on the forum index.

Hi, You could use the time() and tweenFromTo(). With the time() method you'll get the current time of the timeline, you store that in a variable. Then using the tweenFromTo() method you'll tell the function to tween the timeline from the time stored in that variable to zero, like this: var button = $("button#buttonID"), tl1 = new TimeilneMax(), tl2 = new TimelineMax(), tl1Time; button.click(function() { tl1.pause(); tl1Time = tl1.time(); tl1.tweenFromTo(tl1Time, 0); tl2.reverse(); }); Take a look at the reference docs: time() method tweenFromTo() method exportRoot() method Another choice would be to use the exportRoot() method, put everything in a parent timeline and reverse that timeline. Anyway I'm pretty sure that you're dealing with an overwrite issue and if that's the case I'm not sure if anything I've suggested will work as expected; if it doesn't, there's any chance you could set up a live sample or a fiddle or codepen in order to take a better look?. Hope this helps, Cheers, Rodrigo.

Hi I don't know if I understand correctly, but there's a delayedCall for JS version and works in the same way the AS one does, check the API reference: http://api.greensock.com/js/com/greensock/TweenMax.html#delayedCall() Hope that this helps Cheers Rodrigo

Don't worry, glad it helped. Cheers Rodrigo

Hi Rob, Jack explained and offered a good solution in this post: http://forums.greensock.com/topic/7907-reversing-timeline-animation-and-repeating-it-infinitely/?view=findpost&p=30366 Give that a shot and hopefully it'll help. Cheers, Rodrigo.

Hi, One chance would be to add a label in the master timeline's first tween, or just add a label after that tween. Add label at first tween: timeline1.add(TweenLite.to('#div', .5, {scaleX:1.5,scaleY:1.5}, 'label1'); timeline1.add(timeline2); timeline1.add(TweenLite.to('#div', .5, {scaleX:1.0,scaleY:1.0}); Add label after first tween: timeline1.add(TweenLite.to('#div', .5, {scaleX:1.5,scaleY:1.5}); timeline1.add('label1'); timeline1.add(timeline2); timeline1.add(TweenLite.to('#div', .5, {scaleX:1.0,scaleY:1.0}); And in the roll out event you just indicate where the reverse should start, and that point will be the label, like this: timeline1.reverse('label1'); Another choice could be to add a callback in timeline1 to start timeline2 and in the roll out event add the reverse call and a stop call for timeline2, like this: timeline1.add(TweenLite.to('#div', .5, {scaleX:1.5,scaleY:1.5}); timeline1.call(timeline2Function); timeline1.add(TweenLite.to('#div', .5, {scaleX:1.0,scaleY:1.0}); function timeline2Function() { timeline2.play(); } //ON ROLL OUT EVENT timeline1.reverse('label1', true); timeline2.stop(0); The second parameter in the reverse call is to avoid the callback being triggered when you reverse the timeline. Let us know how it works and if you need more help. Hope this helps, Cheers, Rodrigo.

Hi, Well not the easiest questions because some of them will vary depending on user experience. An awesome bezier example is the following: http://codepen.io/GreenSock/pen/Krfod In my experience bezier is a practical learning, as you code and play with it you'll learn more and more of it. TweenLite and TimelineLite are the more basic tools of the Greensock Animation Platform (GSAP). TweenLite gives you the chance to tween any numeric value you want, for example a numeric variable, but the most common scenario is use it with the CSS Plugin which allows you to pass through the constructor any CSS property; also with TweenLite you can pause(), reverse(), add callbacks and callbacks parameters to the tweens. TimelineLite allows you to sequence any Tween you want and use that timeline like an individual tween, but is a collection of tweens. For example the sequence you see in this link: http://www.greensock.com/gsap-js/ Is a collection of tweens (a bezier tween in there too) and once the timeline is over you can play it again, reverse, pause and restart (among others). TweenMax and TimelineMax extend the abilities of the TweenLite and TimelineLIte. Also in the JS version TweenMax includes a series of plugins (CSS plugin, bezier plugin, roundprops plugin) and TimelineMax, so pretty much TweenMax is a very good compound for almost any of the basic animations. Refer to the API reference to learn more: TweenLite: http://api.greensock.com/js/com/greensock/TweenLite.html TweenMax: http://api.greensock.com/js/com/greensock/TweenMax.html TimelineLite: http://api.greensock.com/js/com/greensock/TimelineLite.html TimelineMax: http://api.greensock.com/js/com/greensock/TimelineMax.html This is the basic for starting with the JS platform: http://www.greensock.com/get-started-js/ The jumpstart is a very good reference: http://www.greensock.com/jump-start-js/ And Carl created a great video to work with sequences: http://www.greensock.com/sequence-video/ In terms of Flash and GSAP JS, here's the thing is a little more complex. Happens that since 2011(if my memory doesn't betrayed me) Adobe stopped updating the Flash plugin for mobile devices (Phones and Tablets), so that pretty much transformed the web development scenario. In some cases some clients can't afford to create a cool animated site in flash for desktops and laptops(the good old way) and a site, coded completely different, for devices. Why I bring the code issue, because in the flash IDE, Flex or Flash builder (or the tool of your preference) you'll do it with AS2 or AS3, while the other site would be in javascript, that means double of time, cost and everything. With CSS3 and HTML5 and GSAP you can achieve a lot of stuff in ALMOST every browser for any device (MAC, Windows, Unix, IOS, Android). I'm pretty sure you catch the emphasized almost, one of the growing pains of this deal is the fact that there's still people using Windows with Internet Explorer 7 and 8; those browsers work in very particular ways and have some issues with some CSS3 transform properties, which makes the creation process a little more complicated, but like I said before, as you code you'll learn what works without any problems and what doesn't. The good thing is that of the major browsers, Chrome, Safari and Firefox are very good in terms of the features they support and for what I've read Internet Explorer 11 has made some very good advances in diminish the features gap. To answer your question directly it'll depend on what your scope of development; I haven't ruled out Flash, because once a client that had a Flash site was on board with paying for an update for the flash site and building an entirely different site for devices. For example people that work in games are still using the flash version of the engine, and the Actionscript forum is very active so that gives you an idea of how much the flash version is still used. Finally in terms of JS vs AS this goes along with the previous answer. In AS you don't have to worry about the visitor's browser while in JS you have to consider it, but there are some very good tools in helping with this, but with AS you can't reach the devices market completely. Basically this is something you have to ponder in every development you make and inform your clients about all the possibilities. Hope this helps, Cheers, Rodrigo.

Hi and welcome to the forums. Well basically the problem is that your element doesn't reside inside another with a perspective, therefore the only rotation available is the CSS 2D rotation, the reason why short rotation works OK. In order to have a 3D type of effect your element must be contained inside another with a perspective value, otherwise the transform is bi-dimensional, for further understanding read the following: http://www.w3.org/TR/css3-transforms/#transform-rendering I've updated the fiddle so you can see it working: http://jsfiddle.net/YjVU4/1/ Here's the code anyway: var wrap = $("div#wrap"), circle = $("div.circle"), tl = new TimelineMax({paused:true}), btn1 = $("button#btn1"); TweenMax.set(wrap, {perspective:400});//This is the key tl .to(circle, 1, {rotationX:360}) .to(circle, 1.5, {rotationY:360, rotationZ:360}) .to(circle, 1, {rotationX:0, rotationY:0, rotationZ:0}); btn1.click(function() { tl.play(0); }); Hoe this helps, Cheers, Rodrigo.

Hi Fer, In case you want another type of animation for the always fantastic IE8 you could try with modernizr in order to create a specific animation for it. Check the following post: http://forums.greensock.com/topic/7256-ie-9-fallback-for-3d-transform/ Hope this helps Cheers Rodrigo

Hi Fer, Sorry to hear that the problem remains. As you might have notice IE8 is a tremendous thorn in the side in terms of animating. One possible solution is adding filter:inherit in the CSS of the child elements, in this case the images, like this: /*THIS IS THE MAIN CONTAINER*/ .wrapper{ /*styles*/ } /*THIS ARE THE IMAGES THAT RESIDE INSIDE THE CONTAINER*/ .wrapper img{ /*styles*/ filter:inherit; } Carl created a great sample of this, you can see it here: http://jsfiddle.net/geekambassador/QGJ6c/ And more info regarding this issues in the following posts: http://forums.greensock.com/topic/6934-animation-in-ie8/ Also you could try exploring another choices in order to animate the content, try using modernizr or another feature detection tool in order to create a fallback code for this particular browser, that represents a very small percentage of the visitors. Cheers, Rodrigo.

Yep absolutely, never thought it like that actually. In fact I've made timelines intended to be just one tween in order to achieve that; like you said the first tween of the line handles the ease intended for the start and the second one the ease for the end but, in case someone else is curious about this, with some easing functions (back, bounce and elastic) the total time of the timeline can't be short, over 1 second; another chance is to make the timeline a little longer and use a timescale bigger than 1 in order to "clearly see" both ease functions. Thanks for the clarification Jack!! Cheers, Rodrigo.

Hi Have you tried what's suggested in this post: http://forums.greensock.com/topic/7630-tweenlite-scalex-and-ie-8-problem/ Thats a very common issue with IE old versions. Hope this helps Cheers Rodrigo

Something like this: TweenMax.to(element, time, {top:300, left:300, ease:Back.easeIn, ease:Bounce.easeOut}); Mix the ease functions, one for the start of the tween and a different one for the end, like telling someone to jump, then walk and finally do a little dance Rodrigo,

Hi, I've made a simple sample of the SlowMo so you can see, at a very basic degree, how it works, you can see it here: http://codepen.io/rhernando/pen/tgEBn Jack this topic brought up a question I've had for some time now. Like you said is possible to achieve custom ease functions, but is it possible mix two different easing functions in the same tween?; for example let's say that I want a Back.easeIn and Bounce.easeOut for the same tween, could that be achieved? Cheers, Rodrigo.

Hi and welcome to the forums. The closest thing to css' timing function that I know of is the SlowMo ease, you can configure it with the values you require in order to achieve that initial and final acceleration. I haven't played with it enough to tell you if you could set it up to match exactly css' bezier timing function. Another choice could be to use the easeInOut property in order to give the animation an ease at the start and end Take a look at the api reference for the SlowMo easing here: http://api.greensock.com/js/com/greensock/easing/SlowMo.html Here you can see all the easing functions the engine has to offer: http://api.greensock.com/js/com/greensock/easing/package-detail.html Hope this helps, Cheers, Rodrigo.

Hi and welcome to the forums. Question are you including the scrollTo plugin in your code?, like this: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.8/TweenLite.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.8/plugins/ScrollToPlugin.min.js"></script> With that you also will be using the latest version of the engine. I just tested in IE9 and IE10 a very simple example of the following code: $(document).ready(function(){ TweenLite.to(window, 2, {scrollTo:{y:300, x:0}}); }); And works fine. If you're including the files could you provide a reduce sample of your issue in a codepen, fiddle or live page to see what's happening?. Hope this helps, Cheers, Rodrigo.

Hi, Maybe you could try taking the TweenLite.set instances outside the timeline. You could create a JQuery object that contains all your elements and pass that to the constructor or strip the timeline.add and just use TweenLite.set, like this: //Changes this timeline.add(TweenLite.set(o, beginningState)); //To this TweenLite.set(o, beginningState); Zero duration tweens are a bit tricky when used in timelines, but for setting the initial state of CSS properties are great, you can read a great explanation by Jack in the following post: http://forums.greensock.com/topic/7671-zero-duration-visibility-tween-on-a-timelineme/#entry29172 Hope this helps, Cheers, Rodrigo.

Hi and welcome to the forums. Lately I've been working in populating timelines randomly with DOM elements arrays, and is quite simple. First create the array, for that you can use a simple JQuery selector or any other tool or library of your choice, then you create an empty array and a function to generate a random number to select from the elements array; at the same time you add that number to the empty array (so you don't select the same element more than once) and finally add the particular tween instance to the main timeline. Something like this: var elements = $(".elementClass"),//create an JQuery object with all the DOM elements elementsAmount = elements.length,//amount of elements in the array selected = [],//empty array count = 0,//how many elements are selected num, tl = new TimelineMax();//your master timeline function populateTimeline()//function to add the tweens in the timeline { if(count < elementsAmount)//are all elements selected? { var getNum = getNumber(elementsAmount)//get a random number if($.inArray(getNum, selected) < 0)//check if the number has been selected already { selected.push(getNum); tl.to(elements[getNum], time, {/*tween vars*/}); count++;//one more element has been selected populateTimeline();//execute the function again } else//the number has been selected { populateTimeline();//execute the function again } } } populateTimeline(); function getNumber(number)//function to get the random number { num = Math.round(Math.random() * (number-1)); return num; } And that should do it, give it a try and let us know how it went. Hope this helps, Cheers, Rodrigo.

Hi Massi, The Greensock developers and forums staff is composed by Carl Schooff and Jack Doyle, I'm just a GSAP enthusiast . Anyway glad Jacopo was able to fix this. Cheers, Rodrigo.

Hi, Well the problem seems to happen only with IE and when using the scrollTo plugin, using the following code: <script type="text/javascript" src="js/gsap/TweenMax.js"></script> <!-- Still the same from february --> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.8/plugins/ScrollToPlugin.min.js"></script> <style type="text/css"> body > div { background-color:green; height:5000px; } #div1{ height:100px; width:100px; background:#00f; position:fixed; top:10px; left:10px; } </style> </head> <body> <div></div> <div id="div1"></div> <iframe width="560" height="315" src="http://www.youtube.com/embed/CZF2o06mlgQ" frameborder="0" allowfullscreen></iframe> <script type="text/javascript"> var div1 = document.getElementById('div1'); var win = window; TweenMax.to(div1, 2, {left:300, top:300, delay:3}); //TweenMax.to(win, 2,{scrollTo:{y:2500, autoKill:false}, onComplete:function(){ console.log("end"); } /**/, delay:3}); </script> </body> The blue square (div1) tweens to the indicated position and there's no error. If you uncomment the scrollTo tween it works in firefox, chrome, opera and safari, but you get an error pointing to youtube's embedding code. In IE, on the other hand, the div1 tween works fine but there's a jump to the scroll position, ie, no scroll animation and you get the error to line 5700 character 5. Unfortunately this is beyond my abilities and I won't be able to solve this. Cheers, Rodrigo.

Hi, What is exactly the problem?, something that should is not animating?. Knowing exactly what's not working would help to pin point the issue; note that if you're getting an error with TweenMax.min.js use the production version of the code, but I'm only getting the superscrollorama issue on line 99 when I open the site. But mainly the error has to do with some problem with a particular DOM element that is not defined, try creating variables for the elements your animating via scrollorama and pass those instead and see what happens. Also you're adding two different versions of JQuery (1.8.3 and 1.9.1). For your navbar you could give the scrollTo plugin a try. Hope this helps, Cheers, Rodrigo.

Hi and welcome to the forums. I'm not sure if I follow correctly your issue, but what you could do is use the reverse() and play() methods with the forward and backwards buttons, like this: var tl = new TimelineMax(), playButton = document.getElementByID("playButton"), reverseButton = document.getElementById("reverseButton"); tl .to(element, time, {vars}) .call(pauseTL) .to(element, time, {vars}) .call(pauseTL) .to(element, time, {vars}) .call(pauseTL) .to(element, time, {vars}) .call(pauseTL); playButton.onclick = function(){ tl.play() }; reverseButton.onclick = function(){ tl.reverse() }; function pauseTL() { tl.pause(); } Another option is doing the same but with labels, but that requires more code, because you have to create some conditional logic to check the next label of the Timeline (if you're going forward) or the previous (if you're going backwards). Any way give that a try and let us know how it went. Hope this helps, Cheers, Rodrigo.

Hi, This is an odd behaviour. I've changed the script source from the git repository to the minified copy in CDNJS and it worked fine, although It keep throwing an error and strange behaviour in IE (what a surprise ); while firebug and dev tools throw an error with the embedding code of the video, IE gives the error on line 5700 of TweenMax.js. So I commented out the iframe from the html code and works fine all the way back to IE7. Basically we're talking about a problem due to interaction between youtube's embedding code and TweenMax.js. Now why is this happening?, I have no idea. One option is that you could try the <embed> method instead of the iframe, but this has to do with the scripts interacting. Hope this helps, Cheers, Rodrigo.

Hi, I believe that the problem is due to how you're using JQuery's data() method. The thing is that is data() works with a key and the data for that particular key. So in this case it should be the data from the DIV element, like this: $(".wellness-score").data('endScore',$(".wellness-score").text()); And then you have to use it inside the engine's constructor, like this: TweenLite.to(startScore, 5, {score:$(".wellness-score").data('endScore'), roundProps:"score", onUpdate:updateHandler}); }); Also you could store the specific data in a variable and pass the latter to the constructor, like this: var value = $(".wellness-score").data('endScore'); TweenLite.to(startScore, 5, {score:value, roundProps:"score", onUpdate:updateHandler}); }); As you can see it becomes a little cumbersome which led me to ask you the following: how necessary is to use the data() method?, can you store the value in a variable and then pass the variable to the constructor?. Since you're using XML to retrieve your data I'm going to presume that you're using an ajax call, that has a complete callback which you could use to store the data in a variable each time the ajax is executed. Well just my two cents in that matter. Wrapping up give this code a try and let us know: var startScore = {score:0}, scoreDisplay = $("#score"), wellness = $("div.wellness-score"); wellness.data('endScore', wellness.text()); $(window).load(function() { TweenLite.to(startScore, 5, {score:wellness.data('endScore'), roundProps:"score", onUpdate:updateHandler}); }); function updateHandler() { scoreDisplay.text(startScore.score); } Hope this helps, Cheers, Rodrigo.