Rodrigo

Hi, Just set the supress event boolean to false in the seek method, by default is set to true, that will honour the callbacks and function the timeline and any nested child in it, could have. Like this: var tl = new TimelineMax(); tl.seek(totaltime, false); Keep in mind that every method of this type (play, reverse, resume, restart, pause, time) have this boolean when they are used to jump to a specific position in the tween/timeline or in their particular cases to set the position of the playhead. Best, Rodrigo.

Mhh... no vars in the constructor?! You learn something new every day. Rodrigo.

Hi, Very simple just tween the timeScale property of the tween. Carl posted this reply a while ago and also created a great codepen illustrating how it works: http://forums.greensock.com/topic/8260-stop-animation-of-an-object-on-a-bezier-line-with-easing/ http://codepen.io/GreenSock/pen/LuIJj TweenMax.delayedCall(5, windEnd); function windEnd() { TweenMax.to(windTween, time, {timeScale:0}); } Also you can add easing functions to the tween which makes it look even better. Best, Rodrigo.

Hi Gareth, You're pretty close. One solution could be create a dummy tween (very similar to your own reply): TweenMax.to({}, 5, {onComplete:windEnd}); function windEnd() { windTween.kill(); } With this you're tweening an empty object so there's no need to use a DOM object to do it, not that there's something wrong with that, just to keep the code cleaner. Another solution is use delayedCall, which works as a timer for callbacks: TweenMax.delayedCall(5, windEnd); function windEnd() { windTween.kill(); } As you can see the delayedCall method is quite cool, kind of a GSAP's setTimeout but with the advantage of the usual construction which makes it easier to read and write than setTimeout, specially if you have to pass params to the callback and the fact that you'll be using the engine's timing mechanism. Best, Rodrigo.

Hi, I'm afraid that because of the nature of arrays and how GSAP works this can't be done. The issue is that in your array the objects are values but they don't have any properties assigned to them. For example when you tween an element's left position you indicate the element, the property you want to tween and the ending value. In this case you have the element and the ending value, but the ending value of what?. To solve this you can create an array of objects, give those objects the starting values and finalyy tween those values, like this: var array = [{a:1},{a:2},{a:3},{a:1},{a:2}], amount = array.length; for(var i = 0; i < amount; i++) { var element = array[i]; TweenMax.to(element, 1, {a:0}); } Like that you'll be tweening the values of the a property of each object in the array. Best, Rodrigo.

Hi, Yep Carl is completely right, it's very rewarding knowing that an advice turned out useful. As Jack mentioned if you check the forums the entire moderating staff works really hard and in an incredible cooperative way to help the users. When something's missing they jump right in to complement and support what's been done already. They all deserve recognition for the outstanding job they do, day in and day out. In my case it would be very hard to help users, as sometimes I'm able to do, if I wouldn't have learned a lot of things, mainly thanks to their posts and the knowledge they share with all of us. That, the great job Jack and Carl do developing and improving the engine and the users recognition of all those efforts makes this community what it is. Also congratulations, your site looks amazing!! keep up the good work. Best, Rodrigo.

Hi, I don't know if I should whether laugh or cry... The whole problem with your site is CSS nothing else. In the first section you have three circular elements, each one has a background circle. In IE8 those are not being loaded, this could happen because you're using the shorthand method and you're not adding the quotes marks in the url path: element { background:url(image/path/image.png); } /*TRY*/ element { background-image:url('image/path/image.png'); } Also beware that you're animating the opacity of an element that has a transparent png inside, this could be the source of other problems (look around in the forums), perhaps use jpg files in IE8 and older. Finally you're using position:absolute, which causes the elements being on top of each others, you'll have to position them with the css or via code. Then you have 5 columns animating upwards. Here you're using display:inline-block, which breaks in IE8 and older, replace it with display:inline and it should work. Then you have three elements, they're correctly positioned but don't animate, here it'll help to isolate just that code in order to get a better look, but this can be what Jamie pointed out in the previous post. Finally you have the contact element. Here you're using rgba and border-radius, but the main reason could be the following: parallax.addTween(2500, TweenMax.fromTo($(".callout1 .cta"), 1, { css: { left: -1000, opacity: 0 }, immediateRender: true }, { css: { left: ($(window).width() > 1400) ? 500 : 300,//this opacity: 1 } } ), 0, 0, false); I'm not sure if IE8 can understand that, perhaps store that in a variable and then pass the variable to the constructor, or maybe the issue Jaime mentioned is also breaking this. Well nothing else left except tell you that I'm sorry for being so stubborn about Sitefinity. Finally on second thought I think I'll laugh about it, its healthier Best, Rodrigo.

Hi, There are a couple of things regarding your sample that got my attention. First, in your fiddle on the dragEnd callback you added the following line: tlScrubberKnob.resume(trackTime, false); If you check the value of trackTime is always over 1000, that means you're telling the engine: "resume the timeline at this position", that could be even 30000 seconds!!, and the timelinein question doesn't lasts more than eight hours is a problem, because the engine does goes to that position but the timeline is very much over at that point. You have to divide that value by 1000 in order to match the duration of the timeline, like this: tlScrubberKnob.resume(trackTime / 1000, false); Also as a recommendation try to use the same property for the tween and draggable, so if you're animating the left position in the tween the draggable type should be left, it'll be easier to track properties in case you need to. Second, and this one goes to Carl and/or Jack, when you do that the tween does update but the element doesn't animate any more, perhaps overwrite manager comes into play?. The workaround I found is to kill the tween and create it again, for that you have to create the tween as a global scope variable and a function that creates the tween. I've created a simple codepen so you can see it working; http://codepen.io/rhernando/pen/npBoF Best, Rodrigo.

Well that's a very good reason to contact them, specially if you're paying for a service. That's customer service 101. Yes that is expected, but not because it has something to do with GSAP, but because you're removing the code that's being broken. The error reported by IE8 comes from this particular piece of code in TweenMax.js: p.add = function(value, position, align, stagger) { var curTime, l, i, child, tl, beforeRawTime; if (typeof(position) !== "number") { position = this._parseTimeOrLabel(position, 0, true, value); } if (!(value instanceof Animation)) { if (value instanceof Array) { align = align || "normal"; stagger = stagger || 0; curTime = position; l = value.length; for (i = 0; i < l; i++) { if ((child = value[i]) instanceof Array) { child = new TimelineLite({tweens:child}); } this.add(child, curTime); if (typeof(child) !== "string" && typeof(child) !== "function") { if (align === "sequence") { curTime = child._startTime + (child.totalDuration() / child._timeScale); } else if (align === "start") { child._startTime -= child.delay(); } } curTime += stagger; } return this._uncache(true); } else if (typeof(value) === "string") { return this.addLabel(value, position); } else if (typeof(value) === "function") { value = TweenLite.delayedCall(0, value); } else { throw("Cannot add " + value + " into the timeline; it is not a tween, timeline, function, or string."); } } AS you can see this is basically the add method, I'm not going into further details because is outside the scope of this post. In your code all the add methods are handled by superscrollorama via addTween. What the error is indicating is that the code is trying to add something to the timeline that is not supported by GSAP , so to speak. Since this happens only in IE8 it has to be something done by stiefinity to secure compatibility with IE8 and older. If you isolate the code of mastertrainer.js and create a simple webpage the old-fashion way you'll see that the code works in IE8, if you check superscrollorama's home page in IE8 you'll see that it works: http://johnpolacek.github.io/superscrollorama/ As you can see this is not a GSAP related issue, the engine works in IE8 even considering the fact that is probably one of the worst browsers ever and there are a lot of posts in the forums regarding issues with it. Also I always work with fallback scripts for IE8 and older and I stay away, as much as possible, from rotations and scales, which is the case of your code. That's why since my second reply I've stated that the issue is not GSAP related. You should definitely contact Sitefinity. Best, Rodrigo.

Hi Rob. Yeah a timeline is not, in my opinion, the best way to achieve that. Chrysto created a very simple sample using mainly jQuery selectors and because of it's simplicity is a very solid starting point: http://codepen.io/burnandbass/pen/LckBh You'll see that attaching button events to it won't be too hard. Best, Rodrigo.

Hi, The tweenTo() method is what you're after. It plays the timeline from the current position to the position indicated (could be time or label) and when the timeline reaches that point it stops. mainTL.tweenTo('yourLabel'); Also there's the possibility to add callbacks to the method. You can see more about it in the docs: http://api.greensock.com/js/com/greensock/TimelineMax.html#tweenTo() Best, Rodrigo.

Hi Robert, Glad you were able to solve your issue and thank you for posting your solution, it will be helpful for other users that might come across this scenario. Best, Rodrigo.

Hi Jonathan The parameters after the fromTo correspond to superscrollorama I believe and if the problem was there it'd broke in every browser. As far as the selectors those are jQuery selectors so there shouldn't he a problem either. Best Rodrigo

Hi, Have you contacted Sitefinity regarding this?. It would be very good to know if something they do, in order to secure browser compatibility, might be causing this, because according to what Jonathan reported in reply #7 the engine is throwing that error when that +r+ element is being added, but there's nothing in MasterTrainer.js with that name. Also if the error was in the original code, the problem would appear in every browser and that's not the case. Also, like I said before, since you're creating very simple animations there shouldn't be a major problem even in IE7, so since it works in IE9 and 10, chrome, safari (5 for windows 7) and firefox the problem has to be elsewhere. Maybe in sitefinity they can guide you on how you can work with this or help you inject GSAP into they platform. Jonathan, thanks a lot for lending a hand and reporting the error. Here is the link to the JS where the tweens are being added to superscrollorama: http://www.nasm.org/Sitefinity/WebsiteTemplates/MasterTrainer/JS/MasterTrainer.js Best, Rodrigo.

Hi, Not a plugin but this online tool was released some time and updated about a month ago: http://html5maker.com/ I haven't tested it but you could give it a shot. Another resource you should definitely check is this codepen by Chrysto: http://codepen.io/burnandbass/pen/LckBh Is a great starting point if you want to build an image or content slider. What's so cool about it?, 18 lines of code to achieve that!!, you can't get it more simple than that. Best, Rodrigo.

Hi, Any particular reason why the entire main container is inside a form tag? perhaps that could be the issue. Sorry if I'm being ignorant but it's the first time I've seen this. In terms of the animations there has to be something else since you're not trying anything too fancy, which is great for IE8 and older. The tweens you're setting should work without any problem in IE8 so the issue must be elsewhere in your code. Also a few hints, the css{} wrapper is no longer mandatory, unfortunately the superscrollorama documentation doesn't mention this, and by default any from and fromTo tween instance has immediateRender:true so there's no need to add that in the tween vars either. What you could do is to isolate just the tweens in a simple page to see hot that works and from there start adding the rest of the site's features in order to see what's causing the problems. Best, Rodrigo.

Hi and welcome to the forums. GSAP is indeed compatible all the way back to IE6 so it works with IE8. The thing is that to make some animations work in IE8 you have to add some quirks. If my memory doesn't fails to rotate and scale an element this must be inside an absolute positioned element. There are some issues with child elements when the parent is being animated and the alpha channel in PNG-24 images doesn't have any workaround yet. It'll be very helpful if you could set up a codepen or fiddle with the code that's giving you problems in order to take a better look. Best, Rodrigo.

You're welcome. Sorry that you're still having problems, but I'm afraid that this issue has nothing to do with GSAP or a browser quirk. This is basically the nature of amplifying stuff. For example if you look at an ant through a magnifying glass (please beware of the sun!!! the poor little ant hasn't done anything to you ) that doubles the size of what you're looking, you'd see that the ant goes a specific distance in two seconds, but the fact is that the ant moved half that distance, it just seems like it moved more. The same happens in your sample, if you check with a console.log call for the draggable element's position you'll see that it moves one pixel, but since you scaled everything in a factor 2.2 it seems that it went 2.2 pixels, so if you translate the element 50 pixels it seems that it moved 110 pixels. One option could be to create a mechanism to check the element's position on every drag update, store it in a variable, then check for the next update calculate the difference between those values divided by the scale factor, in this case 2.2, and finally tween the element in that direction by that amount. Perhaps there's a way to constrain the drag displacement in the draggable element created but I'm not aware of that, Carl or Jack could enlighten us in this subject. Best, Rodrigo

Hi, On better inspection there's no need for the onUpdate call, you can achieve the same putting that call inside the loop: var element = document.getElementById("DOMelement"), tl = new TimelineMax({paused:true, useFrames:true}), object = {objectLeft:0},//you'll tweenn this object instead of the DOM element objectTween = TweenMax.to(object, 90, {objectLeft:300, useFrames:true, paused:true}) //this is the DOM tween which is paused and lasts 90 frames tl.to(element, 90, {left:300}); for(var i = 0; i <= 90; i++) { objectTween.time(i); console.log(object.objectLeft); } Best, Rodrigo.

Hi and welcome to the forums. It's not an easy task but neither impossible. I remember creating some sort of 3D environment experiment but is just that, a very simple approach. The keys are that the main container should use the entire width and height of the screen, or as much as possible, in order to create the illusion of things coming at you without generating any distort. You can download it from here: https://docs.google.com/file/d/0B-0o-ayjhl3nMGl2OG1LVTJmVW8/edit?usp=sharing Now if you want a jaw dropping sample check this one: http://codepen.io/mjarosinski/pen/Cpjln Is far better and more complex but the main idea is to notice the fact that the full screen creates a cool projection effect. If you start with that and play around with the z value of the cube container you could achieve what you're looking for. Best, Rodrigo.

Hi and welcome to the forums. As far as I know there's one way to do that. You can create an object with key:value pairs in it with the initial values of the tween and then you create a loop that starts at 0 and ends in the total frame number of the timeline with an onUpdate. Then with the loop you can progress the time() property for the object tween, not the DOM tween, to the loop var number (which would represent the current frame). Finally in the onUpdate call you can register the property being tweened. var element = document.getElementById("DOMelement"), tl = new TimelineMax({paused:true, useFrames:true}), object = {objectLeft:0},//you'll tweenn this object instead of the DOM element objectTween = TweenMax.to(object, 90, {objectLeft:300, useFrames:true, onUpdate:objectUpdate, paused:true}) //this is the DOM tween which is paused and lasts 90 frames tl.to(element, 90, {left:300}); for(var i = 0; i <= 90; i++) { objectTween.time(i); } //this will be called every time the loop progresses the i value, ie, every 1 frame function objectUpdate() { console.log(object.objectLeft); } There are several examples of this technique created by Jack, in this codepen of the Greensock collection you can see how every element position is determinated without applying it to the DOM element using a loop: http://codepen.io/GreenSock/pen/ABkdL And you can create as many simulations you want and register as many properties as you need: http://codepen.io/rhernando/pen/Aydqu Best, Rodrigo.

Hi, Try the following code please: var child = $("#child"), parent = $("#parent"); var parentDrag = Draggable.create(parent, { type:'x' }); Draggable.create(child, { type:'x', onDragStart:function() { parentDrag[0].disable(); }, onDragEnd:function() { parentDrag[0].enable(); } }); I believe the problem might be on the disable and enable calling. You can see it working here: http://codepen.io/rhernando/pen/Ehjbd Best, Rodrigo.

Hi and welcome to the forums. Please check the update preview from this particular reply: http://forums.greensock.com/topic/8189-problem-with-new-draggable-plugin/?view=findpost&p=32055 And let us know if it solves the problem. Also it'll be very helpful if you could set up a simple codepen or fiddle with the isolated issue in order to get a better look. Best, Rodrigo.

Hi, I became interested with your fiddle, well a little obsessed , because is a very neat effect the one you're after. I came up with this codepen: http://codepen.io/rhernando/pen/xGbHK The code is commented but basically what I did was simplify as much as possible. I followed the same markup in order to keep it as similar as possible to the original layout. First took out the scrollTo plugin, which is great but IMO unnecessary in this case. Then instead of a timeline just a simple tween to animate the container, since there's no scrolling the only chances were either move every object or the container, the latter is simpler. Finally record the original positions of the child elements in order to tween simultaneously the scale and the left position of the container, based on the child positions. Best, Rodrigo.

Hi and welcome to the forums. Since IE9 can't render any 3D stuff adding the small z tween or force3D:true in the tween vars won't have any effect. What you could do is use modernizr in order to detect IE9 and create an alternative animation script as a fallback. Check this post for more info: http://forums.greensock.com/topic/7256-ie-9-fallback-for-3d-transform/ Best, Rodrigo.