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.

Yeah, if you look around in the forums Carl and Jack has said in several posts regarding images that the amount, size and animation type can create a huge workload for the browser (chrome in particular and I don't know if this extends to other webkit browsers safari OS and iOS, and android also on that list) and consuming lots of CPU cycles which, as you reported, might not be a big issue in a modern desktop/laptop but in a device with a smaller cpu and gpu can make the animation slower. You're welcome, glad to help. Best, Rodrigo.

Hi and welcome to the forums. The problem is that you're adding a position:absolute to the element but not removing it: function doFlyUp(e) { var tl = new TimelineMax(); tl.append(TweenLite.to("#container", 0.6, {scrollTo:{x:($(e.target).position().left+66.666)*4, y:30}, ease:"Expo.easeOut"})); tl.append(TweenLite.to("#outerRect", 0.6, {scaleX:1, scaleY:1, ease:"Expo.easeOut", onComplete:function() { $(".rect").hide(); $(e.target).show(); //HERE YOU SET THE POSITION TO ABSOLUTE $(e.target).css({"position": "absolute", "margin":"0px"}); TweenLite.to("#outerRect", 0, {transformOrigin:"left top", scaleX:1, scaleY:1}); TweenLite.to("#container", 0, {scrollTo:{x:0,y:0}}); tl.kill(); }}), -0.6); } function goBack(e) { //"INLINE-BLOCK" IS A VALUE OF THE DISPLAY PROPERTY NOT POSITION. $(e.target).css({"position": "inline-block", "width":"150px", "height":"75px", "white-space":"normal", "margin":"30px 0px 0px 75px"}); $(".rect").show(); var tl = new TimelineMax(); tl.append(TweenLite.to("#outerRect", 0, {transformOrigin:"left top"})); tl.append(TweenLite.to("#container", 0.6, {scrollTo:{x:0, y:0}, ease:"Expo.easeOut"})); tl.append(TweenLite.to("#outerRect", 0.6, {scaleX:0.25, scaleY:0.25, ease:"Expo.easeOut"}), -0.6); } If you change it to relative, it should work as expected. Best, Rodrigo.

Hi, Any chance you could change the bind method to single events methods?. It appears that every time a touch event happens, the event handler gets binded again. For example the first time you make a touch event, the handler gets executed once, that's expected. On the second touch event the handler gets executed twice, then three times, and so on. In order to confirm this get an onComplete call on the timeline, to execute a function that returns the labels array with their respective times: http://api.greensock.com/js/com/greensock/TimelineMax.html#getLabelsArray() Also it would be very helpful if you could supply a codepen or fiddle with the isolated issue in order to see how the timeline is being populated. Best, Rodrigo.

Hi, I'd strongly recommend to test in real devices. In a Sony Xperia Tipo with android 4.0.4 the first run is not too smooth but from the second things run very good, but again it has to do with hardware (800 MHZ single core CPU, 512 MB RAM and 200 adreno gpu), Jonathan's device has dual core CPU, 1GB RAM and better GPU and the real Galaxy Tab 2 also has very solid hardware, therefore the animation should run very good in it, so my guess is that the issue has more to do with how phonegap emulates the device than anything else. Also as a good resource for everyone that wants to test on devices, check here: http://opendevicelab.com/ Best, Rodrigo.

Hi What are the hardware specs of the device you're testing in?. I ask this because I tested the fiddle in a mid/low spec android 4 device and, with like almost any animation, the first run is not very smooth. My guess is that this has nothing to do with GSAP and is purely a hardware issue. Best Rodrigo.

Hi, In terms of performance I don't know, my assumption is that there wouldn't be any noticeable effects. The main key in this subject is what your scenario is. Is your timeline playing/reversing or is it paused? time() and seek() won't modify the current state of your timeline, if it's paused will remain paused, if is going backwards, after setting the playhead in the indicated position it'll keep going backwards, while play() and reverse() will set the direction starting at a particular time/label. Also you can look into tweenTo() and tweenFromTo(): http://api.greensock.com/js/com/greensock/TimelineMax.html#tweenFromTo() Those are very nifty methods but they have their up and downsides, like I said it depends of what you're after, perhaps a codepen could help us get a better grasp of what you're after. Best, Rodrigo.

Hi I can't look at your codepen right now, but from the previous post I presume that this has to do with an issue of how the ticker works in this cases. Luckily there's a way to solve it, the addPause method. Check this codepen I created before: http://codepen.io/rhernando/pen/jrfEi In the codepen info you'll find a link to the docs and a better explanation of the issue. Best Rodrigo.

Hi Definitely, you can set up two divs with border-radius:50% and box-shadow and tween their width and height or scale them up. You'll have to give me some hours to post an example. Best Rodrigo

Hi, What you could use is getLabelsArray() method, to get the labels and times of the timeline. You can use that info in order to see where the labels are and where to add them when you create the timeline again. But as soon as create a new timeline you'll have to add the labels in it again, while using the clear method the labels remain in the timeline at the positions where they were originally, with that you can add new tweens at those specific times without worrying about the sequence sync. Also, as you can see in the codepen, in the original timeline you can have as many labels as you can but not necessarily put tween instances in it, so later you can clear the timeline and add tweens in any given label position. Best, Rodrigo.