Rodrigo

Hi Andrei and welcome to the forums, Unfortunately the behaviour you're experiencing is expected. Basically transform origin is a css property that states the origin point of a particular transformation, in your case two rotations, but what it doesn't do is to translate the object, if you check the element's properties with firebug or developer tools, you'll see that the transform matrix numbers associated with translation never change, whereas the ones corresponding to rotation do change, therefore the values of X and Y are zero and zero, which means that you're object just rotated but never got translated to a new position. Then when the second tween of the timeline happens, it takes the rotated element with a transform origin point "left top", but since the image's still in its original position it's positioned with that rotation but with the new transform point, which is "right top". I made a simple image that I hope illustrates a little better what I'm saying: The blue square is the original element, the fuchsia one is the element rotated 90° CW with a transform origin "left top" and the green one is rotated 90° CW with a transform origin "right top". The red dots in indicates the transform origin of each square and the "TL" means top left to indicate where the top left corner is. My suggestion would be to keep just one transform origin and add translation in order to simulate a falling leaf, you could also make some experimentation with the bezier plugin in order to create a falling path. The bezier choice could mean a little more work but since you can orient the element to the bezier path you can forget about the rotation and focus just on the path and let GSAP do all the job for you. Hope this helps, Cheers, Rodrigo.

No problemo, glad to help. Cheers, Rodrigo.

Hi, The problem is that you're creating the second timeline and is active, ie, is playing since the moment you created it, so when you add the TweenLite instances the timeline playhead is not at the 0 position. However if you change your code to this: var animateSecondRound = new TimelineMax({paused:true}); function animateStuff2(){ animateSecondRound.add(TweenLite.to(myDivs, 3, {left:"+=100"})); animateSecondRound.play(); } It works as expected. I updated your fiddle so you can see it working: http://jsfiddle.net/5t9EU/4/ Hope this helps, Cheers, Rodrigo.

Hi, The only thing I can think of is checking the timeline's _active status. That , as you might have guessed, tells you whether or not a timeline instance is active, by returning a boolean value. You mentioned a root timeline, so consider that this works different with an exportRoot timeline than a traditional timeline, for example the following code: var div1 = $("div#div1"), btn1 = $("button#btn1"), btn2 = $("button#btn2"), btn3 = $("button#btn3"), btn4 = $("button#btn4"), tl1 = new TimelineMax({paused:true, repeat:1, yoyo:true}), tl2; tl1.to(div1, 3, {x:300, y:200}); btn1.click(function() { tl1.play(0); }); btn2.click(function() { tl2 = TimelineLite.exportRoot(); }); btn3.click(function() { console.log(tl1._active); }); btn4.click(function() { console.log(tl2._active); }); When you check tl1 just when the page is loaded you get false, if you check tl2 you get an error (tl2 is still undefined ). Then if you export the root, but don't play tl1 and you check you'll get tl1 = false and tl2 = true (maybe Jack or Carl could explain that). Then if you play tl1 and check while it's playing you'll get true and true, and after the yoyo - repeat when all is done you'll get false and false. The point is that when you do the export root and the timeline hasn't played since being exported (it may have played before being exported) and check you'll get true even if the timeline is idle. And I'm going to leave it here because there's a huge electric storm here in the andes and i'll get a blackout any time. Hope it helps, Cheers, Rodrigo.

Hi, It depens on what you're using to get your JS script going. In your case (for what I've seen of your samples) you're using window.onload = function(){}, and that function won't execute until everything in the DOM is completely loaded, meaning, styles, images, scripts, etc. So if you need your images to be completely loaded before tinkering with them, then window.onload is good. But if you need your images to be positioned before they load and you'll use JS for that positioning, then window.onload won't cut it and then you'll need the DomContentReady event, which is not crossbrowser, so in that case I'll recommend you to use JQuery, Prototype or another JS library that takes care of the crossbrowsers issues for you. The reason is that GSAP tweens or animates css properties of DOM elements, which brings the issue of what part of an image IS the DOM element. Is it the image data itself (for example a landscape view)?, no , the DOM element is the <img> tag actually, and therefore the engine operates over that element. Then once all the tags in the html code are in the DOM, JQuery's $(document).ready(); will take action, but that doesn't mean that the images are loaded, what's in the document is the <img> tag but not the data of the image url which is ultimately what we're interested in. My advice would be, if you're going to continue using window.onload, to create some sort of conditional logic outside that function for the animations working on the images, therefore nothing will happen unless every image is loaded (consider that we're talking about every image in the DOM so if you have a lot of image that could mean some patience from your visitors) and after that the animations could happen. Now that doesn't mean that you could take some action to the <img> tags outside the window.onload function, like positioning, changing opacity, etc. If you want to try with a library, like JQuery there are some very useful plugins out there to help you with this, one that is very simple, small and gets the job done is this one from Krio: https://github.com/krio/jquery-image-loader-plugin This one allows to use a simple callback when an image is loaded or track when all the images you're interested in tracking are loaded to enable some particular action. Before I used the load event (JQuery api) but it has been deprecated and it shouldn't work on some browsers, although I've just tried an old sample and worked fine with IE10, IE9, firefox 20, chrome 26, safari 5 and opera 12. As you'll see there's a lot into it but it sounds more complicated than it really is, you have to find what works better for you and your projects. Hope this helps, Cheers, Rodrigo.

Hi, You could try a fromTo tween, like that the from value (autoAlpha:0) is render immediately and then GSAP takes it to 0.7, something like this: TweenMax.fromTo(element, 1, {autoAlpha:0}, {autoAlpha:.7/*here you can add callbacks, delay, ease, etc*/}); Check the api reference for more info on this method. Hope this helps, Cheers, Rodrigo

Hi and welcome to the forums, A workaround would be to create two separated images one of the truck and another of the shadow, give them an absolute positioning inside the div element (so they end up one on top of the other) and create a simple timeline for changing the shadow opacity, like this: var tlShadow = new TimelineLite({paused:true}), Shadow = $("img#truckShadow"); //Set the alpha of the shadow to 0 TweenMax.set(Shadow, {autoAlpha:0}); tlShadow.to(Shadow, .2, {autoAlpha:1}); $("#toggle").click(function () { // Toggle the filter class: $(entity).toggleClass("shadowfilter"); // Update the toggle button text: if ($(entity).hasClass("shadowfilter")) { $("#toggle").html("toggle filter OFF"); tlShadow.play(); } else { $("#toggle").html("toggle filter ON"); tlShadow.reverse(); } }); You can see it working here: http://jsfiddle.net/tYZ8E/10/ Hope this helps, Cheers, Rodrigo.

Hi, I read your posts and I understand what's going on, the thing is that I tried to put together a sample of your initial request thinking that in that way you could solve your issue. As far as the zero duration tween using the from() method, it is behaving correctly. I'm going to presume that your CSS states that the element's visibility property is set to visible, so before you create the tween the element is visible. Then when you create your TweenMax.from() with visibility:hidden in the vars, the engine understands that you want the property changed from hidden (the value passed in the vars) to visible (the original property value) and the engine does so over a time span of 0 seconds, ie, immediately, so as soon as the tween is created is executed and completed, that is why you have to use immediateRender:false and that is why I referred to your first post because I felt is the same issue now as it was then, just with the from method now and I wasn't clear enough in order to explain why it was happening. I hope this helps, Cheers, Rodrigo.

HI Gabriel, The point is when you create a tween with a zero duration inside a timeline with a repeat:-1 (infinite repeats), the behaviour you're getting is the expected. When you create your object in the DOM it CSS visibility property is set to hidden by code (I'm assuming you're still using the code from your first post), until that point you can't see that object. Then you create the timeline and your object is still hidden. Finally you create the tweens inside the timeline and, even if your timeline is paused, the zero duration tween is rendered immediately. Then the timeline completes it first cycle and goes for the next one, at that point the engine takes all the original values it recorded before and starts again, in this case the original value the engine has is visibility:hidden for that particular element, so that is why in the first loop the image is visible. That can be solved by using immediateRender:false as part of the tween's vars, you can see a very simple example here: http://codepen.io/rhernando/pen/zIEqD The image on the left has immediateRender:true as default, and the one to the right has immediateRender:false Also if you use the set method curiously the immediateRender:false is not needed, any reason for that Jack and/or Carl?, you can see it here: http://codepen.io/rhernando/pen/AzJmI Hope this helps, Cheers, Rodrigo.

Hi, You could use some of the plugins from this article in JQuery4u http://www.jquery4u.com/media/10-jquery-audio/ Or a more straightforward approach like this one in CSS-Tricks: http://css-tricks.com/play-sound-on-hover/ If you chack the demo of the latter, you'll see how simple that way is and how easily would be to replicate it with a GSAP callback. Hope this helps, Cheers, Rodrigo.

Hi Arek, You're most welcome and thank you for the kind words!! If you're interested I've polished the code a little and made it work for elements with different heights, you can see it working here: http://codepen.io/rhernando/pen/dLxAJ If more questions arise feel free to ask. As far as putting my info on your site, no problem go ahead, a little free publicity never hurts, unless is bad publicity, but that's not the case here Greetings to el Oso y el Madroño as well as to La Puerta del Sol and that beautiful city and country, I hope to go back there some time. Cheers, Rodrigo.

Hi Arek, The site is coming along really good, the graffic art is quite nice, great job!! As for the auto scroll I've developed some simple code that gets the job done, the only downside is that your elements need to have the same height or the same separation between them in order to work, a little more coding would be necessary in order to achieve something more flexible, but at least is a start. You can see it working here: http://codepen.io/rhernando/pen/bjLxe In this sample all elements have a 100% height which makes it very easy, but those could be used as containers for the different parts of a site. Hope this helps, Cheers, Rodrigo.

Hi Gabriel, Try using immediateRender:false. The thing is that zero duration tweens and instances that use the set, from and fromTo methods, set the values assigned in the vars immediately, therefore once the tween is created, independently of the timeline particular sequence, your img element's visibility is set to visible. Your code could be like this: var tl = new TimelineMax() tl .to(text,3,{left:500}) .to(img,0,{visibility:'visible', immediateRender:false}) .from(img,3,{left:500}); Hope this helps, Cheers, Rodrigo

Don't mention it, glad to help. The issue with the auto scroll function and firefox could be that you're tweening a css property of the body element, like this: TweenMax.to($('body'), 1, {scrollTop:0, ease:Quad.easeOut}); Why don't you try the engine's scrollTo plugin, is super easy to use and works amazing, take a look at the api: http://api.greensock.com/js/com/greensock/plugins/ScrollToPlugin.html With it the code of your auto scroll function would be like this: First you load the plugin like any other script: <script src="js/greensock/plugins/ScrollToPlugin.min.js"></script> And then you make the call: TweenMax.to(window, 1, {scrollTo:{y:$('#city').offset().top}, ease:Quad.easeOut}); //You can set your position like a variable too but both should work with no problem var cityTopPos = $("#city").offset().top; TweenMax.to(window, 1, {scrollTo:{y:cityTopPos, ease:Quad.easeOut}); Hope this helps, Cheers, Rodrigo.

Hi, Is working now, good job. But you have some vertical scrolling possibility which triggers the animation, that's' because the comic section height is 100% and has a 70px margin-top, that gives you 70 vertical pixels to drag. Cheers, Rodrigo.

Hi, One possibility is the center.js code, particularly in this line: $(this).css({position:'absolute', margin:0, left: (left > 0 ? left : 0)+'px'}); If you check with developer tools or firebug that's causing for the div "#enviro" to change it's position from absolute at the beginning of the scroll to fixed and back to absolute when the opacity of the div "#flasz" reaches 1, maybe just remove the absolute part of it. Besides that I can't see anything else going wrong with it. Start with that and lets see what happens. As far as the auto scrolling you could take advantage of the engine, you don't need setTimeout. Create an object and an element with a 0 value, then create a tween inside the window scroll event that lasts 1 second (or the time you want to wait before the auto scroll to happen) and then put an onComplete callback that scrolls to a certain point based on the current scroll position. The good thing about it is that you can take advantage of the overwrite manager, because since you're going to trigger the tween every time you scroll and you're going to be tweening the same object and the same property the previous tween will be killed, something like this: var timeOutElement = {a:0}; $(window).scroll(function() { TweenMax.fromTo(timeOutElement, 1, {a:0},{a:1, ease:Linear.easeNone, onComplete:autoScroll}); //rest of the code }); function autoScroll() { //Here you put the code to scroll the window to the required point //You can use the scrollTo plugin } Like that when you scroll the element "a" of the object is going to be tweened from 0 to 1, and if there's another tween going on (meaning that less than 1 second has past since the last scroll event) is going to kill it, and when the tween completes is going to execute the autoScroll function. Hope this helps, Cheers, Rodrigo.

Hi, I haven't used scrollorama, but it would help a lot if you could set up a live sample (fiddle or codepen) or upload a zip file with the isolated issue in order to take a look at it. The basic scrollorama syntax is the following: $(document).ready(function(){ //set the name of the superscrollorama elemenet var controller = $.superscrollorama({ isVertical: false }); //then you add the tweens controller.addTween(target, TweenMax.from(element, 1, {Vars}) ); }); Hope this helps, Cheers, Rodrigo.

Hi, The site is quite cool and most definitely could be emulated with GSAP. As far as I know there are two options, the easiest one is using John Polacek's Superscrollorama, a JQuery plugin used to control tweens/timelines via scrolling. There are a lot of amazing sites using it, for more info check here: http://johnpolacek.github.io/superscrollorama/ John also offers support here: https://github.com/johnpolacek/superscrollorama The other choice is use a function I created some time ago, is very basic stuff and you have to take care of everything in terms of where your tweens/timelines start and end because is based only in scroll position and not time. You can see it and download the sample code here: http://codeaway.info/parallax-and-scrolling-control-of-tweens-with-greensock-ap-js/ For another sample you can see this site: http://theartofraw.g-star.com/ Hope this helps, Cheers, Rodrigo.

Hi, According to my minimal knowledge in 3d transform matrix, the value you're modifying (0.01) in the matrix is the perspective projection in the Z axis, but your element is not inside one that has a perspective, therefore that value won't have an effect if any because is too small. A possibility would be to, instead doing it through the css you could do it through the engine, avoiding the vendor prefixes, like this: TweenMax.set($("#container"), {z:10}); I updated your fiddle but the problem remains, only in Chrome, works fine in firefox, IE9+, Safari 5, which led me to think that's basically a browser issue and not the engine. Unfortunately Chrome has some issues with animations, if you google for chrome and animation issues you're going to find that chrome has problems with CSS3 transitions, jquery animate(), other js libraries, canvas and svg animations. Here's the updated fiddle: http://jsfiddle.net/KvDEr/2/ Another update on the fiddle in order to pass the values directly through JQuery's css method on a tween update didn't work either, you can see it here: http://jsfiddle.net/KvDEr/3/ What does work is to create an independent tween for the radius with a delay of 1 second: TweenMax.to($("#container"), 1, {borderRadius:'100px', delay:1}); Of course this kills the beauty of the simultaneous tweens, but gets the job done. My thought is that this is mainly a chrome rendering issue and out of my capacities, maybe Jack or Carl could give us more light in this one. Well I hope this helps a little, Cheers, Rodrigo.

Hi Rob and welcome to the forums. First thing would be to ask you which version of the engine you're using, because with the current version (1.9.4) it's working in IE9+, FF20, Chrome 26, Safari 5 and Opera 12. The code that's working for me is the following: CSS #div1{ background: rgb(30,87,153); /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(125,185,232,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* W3C */ height:300px; width:300px; font-size:24px; color:#fff; font-weight:bold; } HTML <button id="btn1">Tween Background Position</button> <button id="btn2">Reset Background Position</button> <div id="div1"> Hide Ho Greensockerinos!! </div> JS $(document).ready(function(){ var div1 = $("div#div1"), btn1 = $("button#btn1"), btn2 = $("button#btn2"), tn1 = TweenMax.to(div1, 1, {backgroundPosition:'50px 50px', paused:true}); btn1.click(function() { tn1.play() }); btn2.click(function() { tn1.reverse(); }); }); You can see it working here: http://codepen.io/rhernando/pen/vfbiJ Also I've attached a sample file for local testing: An advice would be to avoid the progid:DXImageTransform filter for IE6 - IE8, because that breaks up the animation for IE9. Hope this helps, Cheers, Rodrigo.

Hi, Turns out that your final though was quite on the mark. The thing is that animating div elements becomes quite a nightmare, because you have to tween a lot of different css properties (height, width, margins, etc.) which makes the animation quite jittery. But creating the elements independently and positioning them with a loop and then tween all at the same time makes the process more simpler. I tried two approaches starting with other thing I came up for circular rotation, first positioning the elements based on the points from a bezier tween of some objects. In the second way I setted the angles in the same way but every element is in the same position.The only downside in both approaches is that there's a lot of trial and error in setting each element's angle. After that just tween the height property and done. You can see them working here: Bezier positioning http://codepen.io/rhernando/pen/sxwoy Absolute positioning http://codepen.io/rhernando/pen/inDzv Finally the sun is created with a simple half circle created with canvas. Hope this helps, Cheers, Rodrigo.

HI, I haven't played too much with the clipping part of the engine but you could create a clipping rectangle inside a div element with border-radius:50% 50% 0 0; One question though, are your sun rays DOM elements or is it an image?, if they are DOM elements you could use absolute positioning, rotation and scaling them down and then scale them up in order to complete the effect. Unfortunately you caught me without enough time so I can't set up a sample until tomorrow. Hope this helps, Cheers, Rodrigo.

Hi, Keep in mind the fact that both, tweenTo() and tweenFromTo(), methods accept callbacks, so you can add an onComplete on your code to call the pause() function, like this: $("a.security").click(function(){ beneftisContent.tweenTo("label1", {onComplete:pause}); }) $("a.e-managment").click(function(){ beneftisContent.tweenTo("label2", {onComplete:pause}); }) $("a.convenience").click(function(){ beneftisContent.tweenTo("label3", {onComplete:pause}); }) For more info take a look at the api reference Hope this helps, Cheers, Rodrigo.

Hi, Once I had in mind creating a fps to check how the created animations were working, for many resons I didn't even started but the few things that I had in mind was using the requestAnimationFrame method. One thing that you could use is the ticker property of the engine (api reference) in order to check how many times the engine is updating. To read more detailed info about it check the following posts: http://forums.greensock.com/topic/7598-overwritemanager-oncomplete-bug/?hl=ticker#entry28827 http://forums.greensock.com/topic/7499-animations-lag-when-chrome-has-multiple-tabs-open/?hl=ticker#entry28753 Jack explains with a little more detail how the ticker property works under the hood and maybe this can help you getting started. Hope this helps, Cheers, Rodrigo.

Hi and welcome to the forums. Mainly your problem is that you're trying to tween a css property without including the css plugin. To solve this you can either load the plugin or use TweenMax (which among other goodies includes the css plugin). //Load the plugin as well as TweenLite <script type="text/javascript" src="/js/TweenLite.min.js"></script> <script type="text/javascript" src="/js/CSSPlugin.min.js"></script> //Load TweenMax <script type="text/javascript" src="/js/TweenMax.min.js"></script> And like that you're test should work fine. Hope this helps, Cheers, Rodrigo.