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.

Hi, You can do it by tweening the value of a created object and then passing that value using JQuery's css method, like this: $(document).ready(function(){ var par = $("p"), lHeight = par.css("line-height"), heightObj = {a:1}, btn1 = $("button#btn1"), btn2 = $("button#btn2"); btn1.click(function() { TweenMax.to(heightObj, 1, {a:'+=.5', onUpdate:lHeightChange}); }); btn2.click(function() { if(heightObj.a >= 1.1) { TweenMax.to(heightObj, 1, {a:'-=.5', onUpdate:lHeightChange}); } }); function lHeightChange() { par.css("line-height", heightObj.a); } }); You may notice that in the conditional logic I've use >=1.1, that's because sometimes the end value of a could be 1.00000000001 which is bigger than 1 and that'll cause the line going smaller than 1. You can see it working here: http://codepen.io/rhernando/pen/injvJ Hope this helps, Cheers, Rodrigo.

Hi Fernando, It would be very helpful if you could provide a live sample (fiddle or codepen) of the part of your code that's behaving like this in order to take a look at it. Cheers, Rodrigo.

Don't mention it, glad to help. One thing that I request is that if you could send me a PM when your site is done indicating me which animations are using the code I proposed, in order to indicate that in the blog as a working sample, is quite important that people see the code going in a real life sample. Cheers, Rodrigo.

Hi, Well it is a recommended practice to pass elements just once and through variables and when you define those variables limit the amount of elements to go through, something like this: var element1 = $("div#element1"); Like that everytime you call for element1 it is already stored in a variable, and populating that variable is easier because you're giving detailed information of where to look for. Also there's a lot of images being animated in the site, mainly transparent PNGs, and maybe considering the fact that chrome puts quality over quantity in terms of rendering, could be causing some trouble. Also, and please don't take this as a personal thing because is just an observation, your code seems a little over complicated, is very well structured but one thing I would try i would be to simplify it as much as I can, maybe less arrays and more straightforward variables and functions. Finally, unfortunately you're dealing with a very singular issue here (it just happens on chrome and under very specific circumstances), it's like you sat right on the needle of the haystack and chromium hasnt come up with an answer and I'd love to give you a straight one that could solve this, because you're site is quite amazing. Like I told you I checked on chromium a couple of days ago and looked at the site again and one thing i can tell you is that is quite amazing. As soon as you have the new live site let us know in order to take a look, because the fiddle is just one element and doesn't involve the complexity of the real site. Cheers, Rodrigo.

Hi and welcome to the forums, One way would be to rotate the element and scale it down with a TweenMax.set and then scale it back to 1, like this: var obliqBar = document.getElementById("progBar"), tl1 = new TimelineMax(); TweenMax.set(obliqBar, {rotation:25, scaleX:.001, transformOrigin:'0% 50%'}); tl1.to(obliqBar, 0.5, {scaleX:1}); I've updated your fiddle so you can see it working: http://jsfiddle.net/rhernando/6GJ67/3/ Hope this helps, Cheers, Rodrigo.

Hi, Well this will depend on a few factors. If you're using JQuery or not and if you're animating css properties or not. The thing is that if you're animating a css property and you're using JQuery you can use an onUpdate call in order to get that property using JQuery's css method, like this: $(document).ready(function(){ var div1 = $("div#div1"), divLog1 = $("div#log1"); TweenMax.to(div1, 2, {top:400, left:400, onUpdate:updateFn}); function updateFn() { divLog1.html(div1.css("top") + ' // ' + div1.css("left")); } }); Now if you're not using JQuery you can store the value in a variable and using it when you need it, like this: var div1 = document.getElementById("div1"), div1Top, div1Left; TweenMax.to(div1, 2, {top:400, left:400, onUpdate:updateFn, onUpdateParams:['{self}']}); function updateFn(tween) { div1Top = tween.target.css.top; div1Left = tween.target.css.left; } And if you're not animating a css property, like x and y, but yuo're using JQuery, you can use something similar to the code above: $(document).ready(function(){ var div1 = $("div#div1"), divLog = $("div#log"), div1Top, div1Left; TweenMax.to(div1, 2, {y:400, x:400, onUpdate:updateFn, onUpdateParams:['{self}']}); function updateFn(tween) { divLog.html(tween.target.y + ' // ' + tween.target.x); div1Top = tween.target.y; div1Left = tween.target.x; } }); Why I mention this, because x, y, rotations, skews and others are, as far as I know, functions of a css property and the code to get them through JQuery's css method will be quite a chore, so it's a lot easier to let GSAP do the work for you, so you'll be getting the element's x and y as soon as is changed by the engine. Hope this helps, Cheers, Rodrigo.

Hi, I forked part of Greensock's pen and created a simple circular disposition of the elements inside a container. Then the container is rotated using a simple tween. You can see it here: http://codepen.io/rhernando/pen/vloIj The only downside of it is the orientation of each element, since the container is rotating all the elements are rotating as well, so when the tween's progress is 0.5 (halfway) everything is upside down , so in order to apply this you should probably get the container's current angle with an onUpdate call and apply it negatively to each element, or using also an onUpdate set the elements rotation to 0. More experimentation is needed indeed, but I hope this helps you a little. EDIT: The element's arrangement was a lot easier than i thought, just set the individual angles based on the amount of elements and then subtract 90, because the first element is on the left side of the circle at minus 90 degrees position. Codepen updated. Cheers, Rodrigo

Hi, I modified the pen in order to compare the different beziers in it with the curves generated. I can't though draw the simpler curve because I don't know the math in it and what the resulting points are and I didn't exported the code of greensock's pen, so the tween is compared with the quadratic curve and a full circle. Also I added another tween with simple bezier and curviness which approaches very well to the full circle. Is the same address: http://codepen.io/rhernando/pen/kjmDo Cheers, Rodrigo.

Hi and welcome to the forums. The site you reference is quite amazing and not the easiest thing to achieve, but not the hardest either and if you work hard it can be achieved with GSAP. Now in terms of achieving a circular tween the best way I recommend would be with the bezier plugin, you can do it with any of the types the plugin has, like this: /*SIMPLE BEZIER*/ TweenMax.to(div1, 1, {bezier:[{x:100, y:100}, {x:0, y:200}, {x:-100, y:100}, {x:0, y:0}], ease:Linear.easeNone}); /*QUADRATIC BEZIER*/ TweenMax.to(div1, 1, {bezier:{type:'quadratic', values:[/*p1*/{x:0, y:0},{x:100, y:0},{x:100, y:100}, /*p2*/{x:100, y:200},{x:0, y:200}, /*p3*/{x:-100, y:200},{x:-100, y:100}, /*p4*/{x:-100, y:0},{x:0, y:0}]}/*bezier end*/, ease:Linear.easeNone}); The reason for throwing both (simple and quadratic) is because with canvas you can preview how a quadratic curve would look like, giving you a glimpse of the path your element will go through. Another way to preview the paths of a bezier is the pen of the Greensock collection that allows you to see the path, you can play with it and use a TweenMax.set in order to see an immediate render of the path instead of waiting, you can see it here: http://codepen.io/GreenSock/pen/ABkdL I've set up a pen to illustrate a circular tween: http://codepen.io/rhernando/pen/kjmDo Is not the complete thing but I hope it helps you getting on your way. Cheers, Rodrigo.

Thanks for the info Carl, everyday you learn something new. But what threw me off here is the fact that using the original code posted by Bel the first time you call the ajax function in firefox it actually works and in successive calls it doesn't work anymore. Cheers, Rodrigo.

Hi, The problem was with calling the tweens targets the right way and honestly I have no idea why it was working on the first place, maybe someone with more knowledge could give us some light in that matter. Your code in test.html was this: $("#scales").mouseenter(function(){ $("#tipLeft").html('<h1>Weighing Scales</h1>Different sizes are used for different purposes. When receiving goods a large floor scale with a hook attachment is used to measure and check whole boxes and large pieces of meat. For dial scales it is important to be aware of the minimum amount the scale can register. Digital scales are more practical as they show the exact weight, however you should check their maximum capacity.'); TweenLite.to(tipLeft, 0.1, {left:"280px", top:"20px", ease:Power1.easeInOut}); TweenLite.to(tipLeft, 0.1,{autoAlpha:0.9}); TweenLite.to(scales, 0.1, {scale:1.05}); TweenLite.to(tipRight, 0,{autoAlpha:0}); }).mouseleave(function(){ TweenLite.to(tipLeft, 0,{autoAlpha:0}); TweenLite.to(scales, 0.1, {scale:1}); }); The main problem is that you have your tween pointing to scales, tipLeft and tipRight, but in the code of test.html and index.html their are never defined as variables, that's why I don't know how it was working on the first place. If you change that code to this: $("#scales").mouseenter(function(){ $("#tipLeft").html('<h1>Weighing Scales</h1>Different sizes are used for different purposes. When receiving goods a large floor scale with a hook attachment is used to measure and check whole boxes and large pieces of meat. For dial scales it is important to be aware of the minimum amount the scale can register. Digital scales are more practical as they show the exact weight, however you should check their maximum capacity.'); TweenLite.to($("#tipLeft"), 0.1, {left:"280px", top:"20px", ease:Power1.easeInOut}); TweenLite.to($("#tipLeft"), 0.1,{autoAlpha:0.9}); TweenLite.to($("#scales"), 0.1, {scale:1.05}); TweenLite.to($("#tipRight"), 0,{autoAlpha:0}); }).mouseleave(function(){ TweenLite.to($("#tipLeft"), 0,{autoAlpha:0}); TweenLite.to($("#scales"), 0.1, {scale:1}); }); It works after loading the elements again in firefox 20 on win7. I've changed the files so you can check it. Hope this helps, Cheers, Rodrigo.

Hi, Like I said in my first post you could use my function to get it working, because is based only in the scroll position to set the progress of a particular tween, so you don't need to set a specific duration in time (by default 1), which could be the problem here. First you need to put this code in your site: var getVert; $(window).scroll(function() { getVert = $(this).scrollTop(); console.log(getVert); } With this you''re going to see the scroll position every time you scroll the page up and down, with that you'll figure where you have to put an end to the initial tween, maybe a couple of hundreds before the second tween triggers. Lets assume that the amount is 1200 pixels when the tween ends and 100 pixels when the tween starts, then you have to declare your tween as a variable (highly recommended) and put the math in it and you're done: var getVert, nightTween = new TweenMax.to( $('#night'), 1, {opacity: 0})), progressNumber; $(window).scroll(function() { getVert = $(this).scrollTop(); console.log(getVert); function scrollTween(startPoint, endPoint, tweenName); { progressNumber = (1 / (tn1End - tn1Start)) * (getVert - tn1Start); } if(progressNumber >= 0 && progressNumber <= 1) { tweenName.progress(progressNumber); } scrollTween(100, 1200, nightTween) } Like that when you scroll past 100 pixels the tween will start and it will end when you pass the 1200 pixels mark. One last thing remove the console.log() call before final deploy, just in case. If you have any more questions just throw them here or in the blog address of my first post. Hope this helps, Cheers, Rodrigo.

Hi, This is pretty much the way things are right now. I remember like it was yesterday, almost one year ago I was really happy because I was getting my hands on AS3, I was learning to create oop, preloaders, working with sound & video, 3D stuff and on top of that i had GSAP on my hands, then I read about the devices flash plugin situation and how that was going change everything. I didn't knew much about JS and I didn't knew anything about JQuery or any other JS library, the only thing I knew was that I didn't had a lot of time to learn them and get myself going because, at least in Chile this year the sales of devices would be bigger than laptops. I still hate the fact that I have to create even 3 different codes sometimes (firefox and webkit, IE8 and IE7 and sometimes special codes for devices) but that's the way things are now, we're in an adapt or get behind type of race. Canvas and SVG are great and there's been huge advances, but there's a lot to be done yet, edge animate is a great thing, but just taking it first steps, so basically the main tool developers still have is pure code and that brings the issue you mentioned, spend long time looking for the problems, even the smallest ones. But the good news after all that ominous and in some way discouraging text is that you're in a position where a lot of us have been, it's like when you're putting together a desktop for the first time, you put the pieces together but it doesn't work, until you find that something is not plugged, learning goes from the most incredible to the most obvious mistakes but once you made them you got some sort of immediate check list, so I bet you that the next time something doesn't work you're going to look for variable declarations and naming on your functions All is part of the growing pains of this stuff and my best advice is to encourage you to keep going with a positive look on what you're doing and to the things that are coming in our future because is going to be better every day, it's just impossible that it could be worst. And while we have guys like Jack and Carl on our side making our lives a little easier with this tools and resources you just got to know that we're going in the right direction. Cheers, Rodrigo.

Hi, I was assuming that you meant a div with and id "night", right?, that's the one that has the to tween: controller.addTween('#night', TweenMax.to( $('#night'), 7, {css:{opacity: 0}})); That's the only element that doesn't reverse on scroll up. Cheers Rodrigo.

Hi, Mhh it seems ok to me, but the first thing that comes out immediately is that you're using an old version of the engine (1.8) try updating to see what happens. Also the css wrapper is no longer mandatory, the engine detects the property and send the values to the css plugin. Also you could try a fromTo tween and see what happens, like this: controller.addTween('#fade-it1', TweenMax.fromTo( $('#fade-it1'), .5,{opacity:1}, {opacity: 0})); By no means I'm an expert in scrollorama, perhaps other user that has more experience could help, but just in case you could use a function I created some time ago just for that particular tween, I haven't tested scrollorama performance with this function but it shouldn't be any conflict. You can see the code here: http://codeaway.info/parallax-and-scrolling-control-of-tweens-with-greensock-ap-js/ Hope this helps, Cheers, Rodrigo.

Yep, but his particular problem is that he's trying to do that with, I presume, semi-transparent pngs, and the problem with staggerTo is that keeps the preceding images visible, so you can see them through the images placed above, that's why my proposal was to tween the current image's alpha to 0 and the next one to 1, so it can be used in that scenario. My first try was in fact do a stagger with a 0 duration, but after viewing the result on firebug I realized the visibility problem if used with transparent files: Cheers, Rodrigo.

Hi, I wouldn't recommend neither timelineMax and stagger in order to do that, it's far more simple to create a recursive function that tweens the images from autoAlpha:0 to autoAlpha:1. Also in order to achieve a no transition effect you can use TweenLite/Max.set, that method is the equivalent to using a tween that lasts 0 seconds: TweenMax.to(element, 0 {autoAlpha:0}); //this is equal to the following TweenMax.set(element, {autoAlpha:0}) //also can be used with TweenLite TweenLite.set(element, {autoAlpha:0}); //And you can use it inside a timeline in the same way you use the convenience to method var tl = new TimelineMax(); tl.set(element, {autoAlpha:0}); The code would be like this: $(document).ready(function(){ var images = $('img'), count = images.length, transitions = 1, timeline = new TimelineMax({repeat:-1, repeatDelay:1.5}); TweenMax.set(images, {autoAlpha:0}); TweenMax.set($(".active"), {autoAlpha:1}); function fadeImage() { console.log(transitions); var active = $(".active"), next = active.next(); TweenMax.set(active, {autoAlpha:0, className:"-=active"}); TweenMax.set(next, {autoAlpha:1, className:'+=active', onComplete:nextImage}); transitions++; console.log(transitions); } setTimeout(fadeImage,1000); function nextImage() { if(transitions < count) { setTimeout(fadeImage,1000); } else { transitions = 0; TweenMax.set(images[0], {autoAlpha:1, className:'+=active'}); setTimeout(fadeImage,1000); } } }); I set up a codepen with the same images (kindly provided by Carl, thanks Carl!!), so you can see it working: http://codepen.io/rhernando/pen/ydfBb Hope this helps, Cheers, Rodrigo.

Hi, I wasn't clear enough in my first post, sorry about that The seek() and resume() functions might not be needed, because you can achieve the same with just play("label") and pause(). If you have a timeline that lasts 10 seconds with labels at 3, 6 and 9 seconds and you play that timeline during 5 seconds, then you click a button to send the timeline to the 3 seconds label and stay paused, then you click the button to go to the 9 seconds label and stay paused and finally you click a button that executes the play() function, the timeline will play from 9 seconds and forward. That is why the behavior happening in your code is odd and could be because of the seek, pause and resume functions in it, my idea was something more simpler in order to see if that is the problem or something else. Also I noticed that you created some sort of plugin for the slider, maybe something inside that could be causing the trouble. As for the tweenFromTo method I forgot to mention that you can use the same label in both the from and to parameters and also can add a callback, so is a very powerful and handy method, something like this: var tl = new timelineMax({repeat:-1, repeatDelay:1}); //in the rest of the code you add the labels and particular tweens tl.tweenFromTo('label1', 'label1', {callbacks, easing}); So like that you just jump to that point on the timeline. You can see it working here: http://codepen.io/rhernando/pen/Bgjzw In a personal opinion my first choice for a image/content slider wouldn't be a timeline, maybe a setTimeout or setInterval function calling a TweenMax on an element based on a class name (active and inactive) and with a callback that triggers the function over and over, also user events to pause or suspend the timeout or interval, because if you get too many elements inside the slider the labels thing could get a little troubling. Hope this helps and sorry for not answering and getting the pen ready before, Cheers, Rodrigo.

Hi, Well a good way would be use pause (just like you're already using it) and play(), something like this: tl.pause();//pauses the timeline tl.play('labelName');//plays the timeline starting at that label Another way could be to play the timeline starting at a specific label and going to the next one, keeping the timeline paused, using the tweenFromTo() method: tl.pause(); tl.tweenFromTo('labelName1', 'labelName2'); For what I can see in your site the last one seems to be the best choice, since when the user selects the slide the timeline stops. I'll set up a codepen in order to illustrate this methods. Also you can declare the repeat and delays in the timeline declaration, like this: var tl = new TimelineMax({repeat:-1, repeatDelay:1}); Hope this helps, Cheers, Rodrigo.