Rodrigo

Hi, All you have to do is give a perspective value to the elements you are rotating, not their parents. So if you have a class for the front-face of the card and another for the back-face, just set a perspective for those elements and the transformation should be more "flat" and the element will vanish at 90 degrees, like this: TweenMax.set([$("div.cardBack"),$("div.cardFront")], {perspective:500}); Or you can do it through the CSS markup, like this: .cardFront, .cardBack { position:absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; perspective:500; } Hope this helps, Cheers, Rodrigo.

Hi, I had a similar issue just today creating a card flip example; IE10 gave me a trouble with the backface-visivbility property, then I remembered that I had something similar that worked with IE10. Try changing this: TweenLite.set(".cardWrapper", {perspective:400}); to this: CSSPlugin.defaultTransformPerspective = 400; In your yep() function and that should do it. Now why IE10 has that problem with backface-visibility?, I don't now but is a browser thing related with the object being rotated and assigning a perspective value to the parent, which is widely correct except in the IE parallel universe. But the good thing is that the CSS plugin eases our pain once more Hope this helps, Cheers, Rodrigo.

Hi, Is really necessary to remove the elements?; If you check the samples you'll see that the css has the following: backface-visibility: hidden; That means that when the element has rotated 180 degrees you can't see it, allowing you to see the other face of the card. If you check both codepens you'll see that the animation shows one side and then the other and each side is a DIV element, so there's no need to remove one and then add it again to the DOM, they both are there all the time. If you check David Walsh's sample with developer tools or firebug you'll see that both elements are there all the time, like I said the key is in the backface-visibility property. Please double check my codepen so you can see how the code works and consider the following: the bread image represent's the back-face of the card and the painting the front-face. Also there's a new line with playing cards design(the best I could find in a short search) that'll give you a better idea. Now if you really need to remove and add the DIV elements, you have to track the front-face's angle through an onUpdate callback, so when the element's angle is over 90 you can remove it and add the back-face element. Keep in mind that the back-face element must have a 90 degrees rotation in order to simulate the effect and once you've add it you have to tween it to zero degrees. It would be great if you could provide a simple codepen or fiddle, or fork my codepen, to get a better idea of what the problem is. Hope this helps, Cheers, Rodrigo.

Hi As you can see there's a serious flaw in the code I've posted. Please give me a couple of hours to correct it. Sorry for the inconvenience. Is corrected now, just an issue with selectors. The only problem I can't put my finger on is why it looks so hideous in IE10, I'll try to correct it. Rodrigo.

Hi and welcome to the forums. Maybe you could try adding a relative rotation, for example enhance the element's rotation by 180 degrees each time, like this: TweenMax.to(element, time, {rotationY:'+=180'}); Another possibility would be to create a timeline for each card and you can play it forward on mouse over and backwards on mouse out, like this: $("div.element").each(function(i, element) { var tl = new TimelineLite({paused:true}); tl.to(element, 1, {rotationY:180}); element.animation = tl; }) $("div.element").hover(elOver, elOut); function elOver() { this.animation.play(); } function elOut() { this.animation.reverse(); } I've created a codepen so you can see it working: http://codepen.io/rhernando/pen/vjGxH Also take a look at this codepen by Chris Gannon is completely awesome, maybe you can get a couple of ideas out of it: http://codepen.io/chrisgannon/pen/JtljL Hope this helps, Cheers, Rodrigo. On a side note great picture, I remembered the phrase:"arghh... the goggles do nothing!!"

Hi Jamie, If you or anyone else wishes to know a little more about it you can read this: http://en.wikipedia.org/wiki/Double-slit_experiment Specially the part of the relational interpretation, which ultimately explains it. Also you can watch this video: http://www.youtube.com/watch?v=DfPeprQ7oGc Cheers, Rodrigo.

Hi The issue is that width an scale work on different levels. Think of scale like A magnifying glass, sure the element looks bigger but the actual size is still the same. What you could do is multiply the scale for the element's width and you'll get the magnified width so to speak. Hope this helps Cheers Rodrigo

You took me back to modern physics in my university years. A particle can exist in two different places at the same time, but a tween can't Cheers, Rodrigo.

Hi, Well as far as I can see this is an overwrite issue. The thing is that you create your tweens and each tween points to a specific element, no conflict there. But when you add your tweens to the timelines the problem begins. In your first timeline nothing is wrong, but as soon as you add to another timeline a tween that has been added to a previous timeline, my guess is that the engine is taking the last command so to speak; I mean is like variable declaring, if you create a variable and set it's value to "house", then later on your code you give it a value "garden" and finally you use it in a function, that function will use the value "garden". I'm assuming that the issue here is the same. You can see this conflict in the following codepen: http://codepen.io/rhernando/pen/gIaEb The solution I came up with is to use a function to add the tweens to just one timeline, passing to it two different arrays, one with the tweens and another with the times where the tweens should be placed in the timeline. Also the code takes care of clearing the data when is used again and getting the timeline back to it's beginning, you can see it working here: http://codepen.io/rhernando/pen/olkLt Is not the same code you have but I hope it give's you an idea of how can be used in your case with the switch call, it shouldn't be much different anyway. If you have more questions just fork the pen and add your own code in order to take a look at it. Hope this helps, Cheers, Rodrigo.

Hi, Not too long ago I created some stuff with random ordering inside a timeline. Give the following code a try: 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; } Also if you want to create a new sequence once the timeline has ended you can add a callback that clears the timeline and calls the populate function again, or if you're comfortable with one sequence per page load you can add a repeat:-1 to the timeline. Hope this helps, Cheers, Rodrigo.

Hi and welcome to the forums. Usually developers that work with scrollorama normally use the from method. What you could try is use a couple of TweenMax.set() instances to get the elements to their initial positions and then add the from tweens to the controller, like this: /*THIS IS NOT NECESSARY FOR THE #SLOW-ROTATE ELEMENTS UNLESS IT HAS A ROTATION SET IN THE CSS MARKUP*/ TweenMax.set('#slow-rotate', {rotation:0, ease:Quad.easeInOut}); TweenMax.set('#fast-rotate', {rotation:-180, ease:Quad.easeInOut}); controller.addTween('#slow-rotate', TweenMax.from( $('#slow-rotate'), .25, {rotation: -90}, ease:Quad.easeInOut}), scrollDuration); controller.addTween('#fast-rotate', TweenMax.from( $('#fast-rotate'), .25, {rotation: -1260, ease:Quad.easeInOut}), scrollDuration); Also note that the css:{} wrapper and the immediateRender:true were stripped; this because neither is necessary, the engine detects if the property being tweened is a CSS property and sends it to the CSS Plugin and, by default in from and fromTo instances immediateRender is true so there's no need for it. As for the animation being jagged and since you're working with a scrollDuration parameter I'm going to presume that this is happening with Chrome, maybe you could try with a JQuery plugin called NiceScroll, you can see it here: http://areaaperta.com/nicescroll/ As for the last question you could use a callback in the previous tweens for that element, like this: controller.addTween('#fast-rotate', TweenMax.from( $('#fast-rotate'), .25, {rotation: -1260, ease:Quad.easeInOut, onComplete:startAppear}), scrollDuration); function startAppear() { appearTween.play(); } var appearTween = new TweenMax.from( $('#appear'), .5, {opacity:1, paused:true}); If this doesn't help please set up a live sample (fiddle or codepen) in order to get a better look at your code and see what could be causing the issue. Cheers, Rodrigo.

Hi, Well depends on what your loading into your page. The most reliable method I know is use the window.onload event handler; this one is triggered once everything in the DOM is loaded, ie, scripts, text, images, etc.. You can create all your tweens and timelines and start them with window.onload. In this case my recommendation will be to nest as much as you can, ie, put as many tweens and timelines inside one parent timeline or in as few as possible to get a better and simpler control of your animations. It'll be like this: var masterTimeline = new TimelineMax({paused:true}), tl1 = new TimelineMax(), tl2 = new TimelineMax(), tl3 = new TimelineMax(); //Populate your timelines tl1 .to() /*...*/ .to(); tl2 .to() /*...*/ .to(); tl3 .to() /*...*/ .to(); masterTimeline.add([tl1, tl2, tl3]); window.onload = function() { masterTimeline.play(); } Also you could concatenate or adjust the sequence in which your tweens/timelines play with callbacks, check Carl's video tutorial on sequencing: http://www.greensock.com/sequence-video/ If you're dealing with images and you want to load all the images window.onload also could be the solution but if you're looking for something more fancy take a look at David DeSandro's images loaded. Is a very nifty way to preload your images and it has it's own callbacks which is very useful for this cases: http://desandro.github.io/imagesloaded/ Hope this helps, Cheers, Rodrigo.

Hi Jeff and welcome to the forums. The engine indeed updates 60 times per second, because it runs on the Request Animation Frame method, you can read more in the following posts: http://forums.greensock.com/topic/6811-tween-engine-always-running/ http://forums.greensock.com/topic/6773-requestanimationframe-ticker-keeps-on-going/ As far as specify the fps I believe that is not possible, but I'm not completely sure about it. Anyway I wouldn't recommend it because it could create an unexpected behaviour because basically if the ticker is working with the RAF method and it might disturb the proper function of it, but I leave it to Jack and/or Carl so they can give you a more complete answer. On a side note I'm very curious on why would you want to change the fps of the engine. Here you can read a little more about the RAF and it's intricacies: http://creativejs.com/resources/requestanimationframe/ Hope this helps, Cheers, Rodrigo.

Hi Gabriel, I've played a little with your codepen and when you change the code to this: tl.addLabel('start','+=1') .add(TweenMax.to(anim,2.2,{time:2.2, ease:Linear.easeNone}),'start+=2.2') .add(TweenMax.to(anim,7,{time:3, ease:Linear.easeNone}),'start+=4.3999999') You get the problem you report and that is a good ol' overwrite problem and probably the reason why when you change your code to 4.401 it works because maybe you have a delay or something in another part of your code that causes the problem when the second tween of the timeline is added 4.4 seconds after the label. I also changed time for progress and get the same results, like this: tl.addLabel('start','+=1') .add(TweenMax.to(anim,2.2,{progress:0.55, ease:Linear.easeNone}),'start+=2.2') .add(TweenMax.to(anim,7,{progress:0.75, ease:Linear.easeNone}),'start+=4.3999999') A good exercise would be to get the duration of the timeline and see if it matches with the theoretical time. Also a question, is completely necessary to put the tweens relative to the label?; is there any chance to use just relative positioning based on the timeline's total time like this?: tl .add(TweenMax.to(anim,2.2,{time:2.2, ease:Linear.easeNone}),'+=3.2') .add(TweenMax.to(anim,7,{time:3, ease:Linear.easeNone})); I get the same behaviour just adding one more second to the first TweenMax instance and setting it's position 3.2 seconds after the beginning, also you could achieve the same with just absolute positioning, like this: tl .add(TweenMax.to(anim,2.2,{time:2.2, ease:Linear.easeNone}),3.2) .add(TweenMax.to(anim,7,{time:3, ease:Linear.easeNone})); Hope this helps, Cheers, Rodrigo.

Hi Rory, One thing is to add the tweens to the timeline through a function, call that function on document ready or window load(as it fits better to your app) and on the clear event pause your timeline at the beginning, clear it and finally call the function again. Also use a simple TweenLite.set() instance to get your elements to their initial states (opacity, position, size, etc.) and when you create the timeline instance set it to be paused. I've forked your pen, you can see it here: http://codepen.io/rhernando/pen/zxtkC Hope this helps, Cheers, Rodrigo.

I'm going to correct myself here. When you use the shorthand property with a set() instance, it clears any previous data, so if you do as follow: TweenMax.set(element, {background:'url("imgUrl.com")', background:'#000'}); If you check the element style with dev tools it'll have only the background-color property while the background-image will be empty. If you use the complete properties like this: TweenMax.set(element, {backgroundImage:'url("imgUrl.com")', backgroundColor:'#000'}); The element style will have both if you check the style with dev tools, both properties will have the given values in the TweenMax instance. Cheers, Rodrigo.

Hi Gabriel, What I can say is that is an expected behaviour and not related with GSAP or JQuery (for my understanding). The thing is that background is a shorthand property, while background-image/-color/-repeat/-position and so on are the specific properties of the given element. The good thing of a shorthand property is that it allows the developer to use just one line of code to set all of them, so instead of doing this: #element{ background-image:url('yourUrl.com'); background-position: top left; background-repeat:no-repeat; } You can do this: #element{ background: url('yourUrl.com') top left no-repeat; } With the latter you're setting the same specific properties, ie, image, position and repeat but with less work. A completely different property is background-color. So if you set the background-image, the background-color property is empty, therefore you can set it later. Then you're element will be black and if later you set the background-image again you'll see the image instead of the color. Basically is like doing this: #element{ backgound-image: url('yourUrl.com'); } #element{ backgound-color:#000; } Over and over... As far as other properties facing the same issue font and border come to my mind right now, but basically every one that has a shorthand property to set the element's style. To read more about it check the following links: Official W3C page about the CSS2.1 specification: http://www.w3.org/TR/CSS21/about.html#shorthand Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties Hope this helps, Cheers, Rodrigo.

Hi, Sorry I couldn't post before. Is not too much code though and is not a couple of lines either, you can see it working here: http://codepen.io/rhernando/pen/BzkKI Is not the complete work (you still need the right mask) but is the same process and can be added to the update callback too. Also notice that I'm working with the text holder color instead that the body background, consider that if you use a gradient or image this could become quite a mess. Hope this helps, Cheers, Rodrigo.

Hi You could use the CSS Plugin to change the color using rgba parameters and use an onUpdate callback to pass each color of the gradient. Unfortunately I'm on my phone so I can't set up a working sample, but I dI'd something like that for animating a 3D transform simulating the shadows on the far side of the element. Later I'll try to post a sample. Hope this helps Cheers Rodrigo

Hi, I'm not sure what could be the problem, I've forked your code and changed to this: targetItem.on("mouseenter", function(event) { TweenLite.killTweensOf(targetItem); TweenLite.to(targetItem, 1, {css:'background-size:100px 1px', ease:Sine.easeOut}); }); targetItem.on("mouseleave", function(event) { TweenLite.killTweensOf(targetItem); TweenLite.to(targetItem, 1, {css:'background-size:0px 1px', ease:Sine.easeOut}); }); And the mouseleave tween worked fine, in other cases you just get a jump to the initial value. Also there's a codepen of the Greensock collection that illustrates a very good use of over and out elements, but I couldn't find it (is not in the public collection), so I created one myself to illustrate a more simpler way, you can see it here: http://codepen.io/rhernando/pen/Kgace Hope this helps, Cheers, Rodrigo.

Hi, I've never worked with css transitions and GSAP on the same element at the same time, so I can't help you directly with that. But it definitely sounds like possible trouble. Could you set up a codepen or fiddle in order to see a live and reduced sample of your problem?. One thing you could try is use the engine's SlowMo ease function to replace the cubic bezier transition, is not the same but it might help. Take a look at the api reference here: http://api.greensock.com/js/com/greensock/easing/SlowMo.html Also check this codepen I've made using the SlowMo ease: http://codepen.io/rhernando/pen/tgEBn Hope this helps, Cheers, Rodrigo.

Hi, I've never worked with Chris' code so I can't tell you if it's working or not or it's proper use. What I can tell you is that Chris' code fetches an arguably "top secret" object called _gsTransform; I say arguably because it's been posted so many times in the forums that I seriously doubt how secret it remains by now . That object contains all the transform properties used by the engine whether they're being animated or not. Right now I'm working in a 3D stuff so I took a screen capture of dev tools so you can take a look at it: In order to use it you should use the following code: TweenMax.set('#cube', { rotationX: remandingX, rotationY: remandingY, overwrite: true, onComplete: easeIntoSlot, onCompleteParams:["{self}"] }); function easeIntoSlot(tween) { console.log('easeIntoSlot'); var currentRotX = tween.target[0]._gsTransform.rotationX; var currentRotY = tween.target[0]._gsTransform.rotationY; //rest of your code } Also keep in mind that you'll get the rotation values in radians and not degrees, so if you want to use them in the latter you have to convert them like this: var currentRotX = tween.target[0]._gsTransform.rotationX * (180 / Math.PI); var currentRotY = tween.target[0]._gsTransform.rotationY * (180 / Math.PI); If is not much to ask, could you please post the link of the completed app, is looking very nice and is quite fun. Hope this helps, Cheers, Rodrigo.

Hi and welcome to the forums. The basic usage of the engine's ticker function is as follow: TweenLite.ticker.addEventListener("tick", yourFunction); function yourFunction() { //your code } That function will trigger every time the engine updates, but is no guarantee of performance improvement, that'll depend on other factors also, for example what's the callback target: images, shapes, both?; how many targets there are: 5, 50, 500?. To understand a little more please check this reply by Jack: http://forums.greensock.com/topic/7430-more-tick-property-example/?view=findpost&p=28045 For more details check this posts: http://forums.greensock.com/topic/6252-animation-in-canvas/ http://forums.greensock.com/topic/6641-cpu-performance-tick-and-multiple-canvas/ Also you can see this codepen of the greensock collection for more inspiration: http://codepen.io/GreenSock/pen/Kajpu It deals with the bezier plugin but it uses the tick function on a canvas element. Hope this helps, Cheers, Rodrigo.

Hi and welcome to the forums. Michael71 a respected community member, created some time ago a JQuery text plugin, but I haven't used it, so I don't know if it'll fit your needs, but is worth to take a look at it. Here's Michael's blog post: http://nightlycoding.com/index.php/2013/03/text-animation-jquery-plugin-released/ And this is the code repository in github: http://netgfx.github.io/SplitText/ AS for the engine having a function or method to handle and sequence arrays you can try with the stagger methods: http://api.greensock.com/js/com/greensock/TweenMax.html#staggerFrom() See which one is the best for you in this case. Also the code you posted should work, as far as I can see. You're adding the tweens to a timeline through an each loop, that will add the tween in sequence and since you're not using any positioning indication each tween should be added at the end of the timeline, so the first element should be animated and the the second, third and so on. Take a look at Carl's video tutorial to work with timelines and sequences is a great learning resource: http://www.greensock.com/sequence-video/ I've created a codepen so you can see it in action: http://codepen.io/rhernando/pen/xbapq Hope this helps, Cheers, Rodrigo.

Great sample Carl!! Is going to the playground for further experimentation Rodrigo.