Rodrigo

Hi Jeff, The easiest way to do that is to add an id name to your anchor, and then set the Tween to that point using the scrollTo plugin and some method to get the offset position of the anchor. Something like this: HTML blah blah blah blah <a href="#" onclick="gotoAnchor1()">go to anchor1</a> blah blah <div class="yourClass">blah blah blah blah blah blah blah blah<span id="anchor1">blah blah blah blah blah blah</span> blah blah blah blah...</div> Javascript var anchor1 = document.getElementbyId("anchor1"); var posTop = anchor1.offsetTop; function gotoAnchor1() { TweenLite.to(window, 2, {scrollTo:posTop}); } Now in JQuery it would be like this: HTML blah blah blah blah <a href="#" id="link1">go to anchor1</a> blah blah <div class="yourClass">blah blah blah blah blah blah blah blah<span id="anchor1">blah blah blah blah blah blah</span> blah blah blah blah...</div> SCRIPT $(document),ready(function(){ var elem = $("span#anchor1"), elemPos = elem.offset().top; $("a#link1").click(function() { TweenLite.to(window, 2, {scrollTo:elemPos}); }); }); Hope this helps, Rodrigo.

Hi and welcome to the forums, Mhh.... it seems like a job for Jack and/or Carl here. The problem is not when you scale down and then back to 1, that works fine in IE 6, 7 & 8 (which are the ones that don't support css3 transforms). The problem is when you set a scale number bigger than 1. For example if you set a scale smaller than 1 in mouse out and a scale bigger than 1 in mouse over, it won't scale past the original size. And in IE7 it does changes the margin-left property of the first element to 0 For more illustration check the following: http://jsfiddle.net/rhernando/EjxPJ/1/ Best , Rodrigo.

Hi Tiago, Sorry to hear that you're still having problems. Right now you have a lot of your code commented so there is actually little to nothing going on, it would help if you could provide a live test with the complete code in order to check where the problem could be. Also it would help if you could post some of the code here in the forum so other users can take a look at it, the more eyes see it more likely to be resolved. Regarding the problem with IE7, first remember that this forum is in english meu amigo so it would be line 2809 character 7, and second i believe you're going to need more specialized help from the Greensock masters in this one. Sorry i couldn't help you right now, I'll be waiting for the complete code in order to take a look at it. Best, Rodrigo.

Hi Don, Question, are you trying this with IETester or some IE rendering engine?, because i see no problem with the following example using Chrome IETab, which I've learn to cherish and trust more than IETester. http://jsfiddle.net/rhernando/Z2qEN/ Also it would help if you could post some of your code in order to see if someone here can find another way to help you. Also if you search in the forum there's been a lot of people with some trouble in IE8 mainly, and as Jack has explained before, it seems that the rendering abilities of IE8... well... they pretty much stink Anyway take a look at the code of my example and post some of yours in order to get a more complete idea of what you're trying to achieve. Best, Rodrigo.

Hi Ed, Take a look at this resources: http://www.jquery4u.com/media/10-jquery-audio/ But the more straightforward method i know is this: http://css-tricks.com/play-sound-on-hover/ Best, Rodrigo

Hi Jack, Maybe this is a dumb question, but for this version of the scrollTo plugin how does the syntax goes?, is it necessary to declare a variable or not? because with the code below I'm not getting anywhere: TweenLite.to(elem, 1, {scrollTo:{y:max}}); I looked at the code of the plugin but my knowledge of javascript is not even close enough to know how this works Cheers, Rodrigo.

Hi Tiago, I looked at your site using firebug and as far as i can see now (i didn't gave a good look to your js code) is that you're getting an event propagation problem. What i saw is the separators display going bezerk between list and none, background position doing the same stuff between 20px 20px and 20px -20px. Maybe you could put some console.log or alerts inside the tween to see when things are happening, in order to check if the problem is with your code or tweenmax.js. Also use the uncompressed version for development and in the final version you reference to the compressed version, in case there is a bug with tweenmax.js is going to be easier to find. Also try using the className method instead of tweening a bunch of properties: TweenLite.to(myElement, 1, {css:{className:"class2"}}); http://api.greensock.../CSSPlugin.html I hope this can help, Cheers, Rodrigo.

Hi Tiago, Using JQuery you can get the document total height like this: var max = $(document).height(); And then you can trigger the following tween to scroll to the bottom of the page: TweenLite.to(window, 2, {scrollTo:{y:max}, ease:Power2.easeOut}); Of course if you're using another DOM element be sure to use it instead of window. Now in pure javascript it would go like this: var body = document.body, html = document.documentElement; var totHeight = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight ); function scrollWindow() { TweenLite.to(window, 2, {scrollTo:{y:totHeight}, ease:Power2.easeOut}); } I hope this helps a little, Cheers, Rodrigo.

Hi and welcome to the forums, Mhh... as far as I can say the only advice will be to create one timeline and then add the respective tween to it, instead of run two timeines, for the rest your code looks good, at least to me . var tl1 = new TimelineLite(); tl1.insert( TweenLite.to(elem, 1, {css:{left:number}}) ); tl1.insert( TweenLite.to(elem, 1, {css:{rigth:number}}) ); Now in terms of tweening right and left on the same tween, as far as I know, that can't be done because in my experience GSAP renders the css attributes in the order that they are declared, so if you put this: TweenLite.to(elem, 1, {css:{left:'100px', right:'100px'}}); That is going to tween your element to the left position, but not the right position, and if you invert them is going to tween the right position but not the left , so separate tweens are needed, but maybe someone with greater knowledge could give you more advice in this matter. Anyway I hope I can help a little with this, Cheers, Rodrigo.

Hi Jon and welcome to the forums. First GSAP JS does not support css3 properties yet, Jack (Greensock developer) is currently working on it. But he got a workaround which you can see here: http://forums.greensock.com/topic/6230-how-to-tween-css3-transform-properties/page__p__22253#entry22253 And based on that post another user came up with this: http://forums.greensock.com/topic/6729-swinging-sign/ You can also find more info about transform Matrix on IE8 here: http://stackoverflow.com/questions/3055383/dximagetransform-matrix-absolutely-position-child-elements-not-rotating-in-ie-8 I believe that there might be your problem. Any way it would help to see the code of your tween/timeline to find out more. Hope i can help a little. Cheers, Rodrigo.

Hi, Since helping Stefdv in this topic i dug a little more into parallax and scroll controlled Tweens/Timelines, and i dedicated some time to create a tutorial and some code in order to help GSAP JS users to create some apps and web sites using this technique. Is not a lights-out-blow-your-mind type of tutorial, but i just was hoping to help some other users who might want to apply this into their creations. Here you can find the tutorial, as well as the source code and a couple of examples, since i don't have a blog of my own, i'll take the liberty to point comments here, unless the staff says other thing. Since i started with this tutorial i found a lot of things about parallax and because of that i will make a second tutorial which i haven't started yet, but as soon as my schedule allows me to i will write it. I hope you enjoy it, Cheers, Rodrigo.

Hi Barry, No problemo... I got a little intrigued by your problem so i looked up for some information and i found this regarding the @font-face rule and IE8: http://msdn.microsoft.com/en-us/library/ie/ms530757%28v=vs.85%29.aspx I also read in StackOverflow that in the @font-face rule, the recommendation is to use quotation marks in the font-family property. And finally take a look at this: http://css-tricks.com/snippets/css/using-font-face/ Cheers, Rodrigo.

Hi Barry, Glad to hear you find out where is the problem, but it's a strange behavior to say the least. Question, have you tried changing the tween effect?, i mean try something like this: TweenLite.to($('#headerText'), 1, {css:{autoAlpha:0.5}}); in order to see if the style changing is what is causing the trouble or if maybe something else. And like Jamie said try using the uncompressed code in order to pinpoint the problem. And another suggestion, try a web safe color to see if that could be causing trouble. http://www.w3schools...html_colors.asp Cheers, Rodrigo.

Hi, Here is a simple example of background change layering the different elements, meaning there are three background images and a div with text in front of them. The background images are changed with a crossfade tween: http://jsfiddle.net/rhernando/4ALZb/4/ Cheers, Rodrigo.

Hi, There's a lot going on in your code, and like Jamie says IE8 has a major collapse with preventDefault() so my suggestion will be to try this: if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue = false; }; Cheers, Rodrigo.

Hi Moolood, Sorry, i thought i knew what your problem is because i once ran into some trouble with som jquery ajax calls, php and images, in which i kept loading the image data instead of the image, which got resolved using the data uri scheme, but i'm not sure if is the same problem. Maybe this can help a little: http://stackoverflow.com/questions/11571132/get-image-from-base64-string http://www.websiteoptimization.com/speed/tweak/inline-images/ http://nathondalton.wordpress.com/2011/12/28/embedding-images-in-html-with-data-uri-base64-encoding/ Hope i can help, Cheers, Rodrigo.

Hi and welcome to the forum!! The most simple way is to use repeat property, but for that you have to use TimelineMax, since repeat is not a property of TimelineLite. Take a look at the api reference. You said that the idea is to repeat that timeline 7 times, so it would be something like this: function forward(){ var tl = new TimelineMax({repeat:6}); tl.to(one, 0.75, {css:{rotation:".16rad" },ease:Linear.easeNone} ); ..... tl.to(two, 0.14, {css:{rotation:"0 rad" },ease:Linear.easeNone}); } Keep in mind that the code above will play the tween 7 times, since it will play one time and repeat six times. Hope this can help, Cheers, Rodrigo.

Hi Stef, You are most welcome, anyway i have something else to clarify this point a little more. Let's go to the expression breakdown: progress = (1 / (end - start)) * (position - start) First part Let's say that your tween starts when the scroll bar is 100 px from the left edge of the screen, and ends when the scroll bar reaches the right edge. Asume that this position is at 2100 px. So in a very simple term your tween is going to extend for 2000 pixels, is like saying that is going to last let's say 10 seconds. So considering thath almost every programming language uses miliseconds your tween will last 10000 miliseconds, and each milisecond can be considered a progress or update unit of your tween. In the case of updating your tween with the scroll you have to consider each pixel that is scrolled a progress or update unit. Since the progress of the tween has to be set in base of a number that goes between 0 and 1 you have to divide the total progress of your tween -that's 1- between the total progress or update units, in this case pixels. Since our tween is going to last 2000 pixels you have to divide 1 between 2000. And that's how you get the single progress or update unit. (1 / (2100 - 100)) ==>progress unit ( 0,0005 ) Second Part Now your tween is progressing as the user scrolls to the right of the screen and reversing as the user scrolls to the left, right? We have the total amount of pixels on which the tween extends and now we need to know where the scroll bar is right now so we can tell the tween "hey buddy, you have to be here now". For that we need the actual position of the scroll bar. Since the $(window).scroll() function triggers every time the window moves we can ask for the scroll bar position. Let's say that the scroll bar is actually at 1200 pixels. Since our tween started at 100 pixels, this means that our tween has progressed 1100 pixels, so we can obtain this number like this: (position - start) ==>actual position ( 1100 ) Summarizing progress = (1 / (end - start)) * (position - start) At the beginning of time this is quite simple: progress = (1 / (2100 - 100)) * (0 - 100) = (0,0005) * (-100) = -0,05 This is smaller than 0 therefore our tween goes nowhere. progress = (1 / (2100 - 100)) * (100 - 100) = (0,0005) * (0) = 0 Our tween is at the very beginning nothing happens, yet... progress = (1 / (2100 - 100)) * (1200 - 100) = (0,0005) * (1100) = 0,55 Our tween is a little past the half point. I hope this helps a little more. Cheers, Rodrigo.

No problemo my friend, here to help . There are two public method called "progress" and "totalProgress" for both TweenMax and TimelineMax; i'll just quote some of the api reference: Take a good look at the documentation in the site here You have to consider at which point the tween will begin and at which point it will end, therefore those two points are key to set the progress of your tween. In terms of the mathematical expression itself it goes a little like this: you need a number that is linked to the actual position in the X axis which you get from the scrollLeft method. Since you want your tween to begin at certain point when the user scrolls, you need a 0 at that point (remember the API?) and your tween is going to extend from that point to an end point where the tween is over even if the user keeps scrolling, right?. Since you need to tell TweenMax to set the progress with a number between 0 and 1, you have to divide 1 by the amount of pixels that your tween is going to last and then multiply that by the current position relative to the start point. That's great, like i said take a look at the docs here and to the JQuery API in order to understand a little more. Any way you caught me a little short of time in order to explain a little more, but i will try to get something in the next days in order to clarify a little more this subject. Cheers and Good luck!!! Rodrigo.

Hi Stef, Maybe this could help a little, it's not the complete job but it could help you for a start. Just like Carl said, in JQuery with scrollLeft you can get (and set if you want) the horizontal scroll position of any element, including window; and the scroll event is going to helpp you trigger a handler that is going to give you the current left position, pretty much like this: $(window).scroll(function() { var position = $(this).scrollLeft(); $("div#log1").html(position); }); So any time you scroll in the horizontal the variable position is going to get the horizontal scroll value so you can use it. And with some simple math you can get the position and transform it into something usefull by creating a number that goes between 0 and 1 so you can set the progress of your tween. Something like this: $(window).scroll(function() { var position = $(this).scrollLeft(); var start = 400; var end = 800; var progress = (1 / (end - start)) * (posicion - start)); if(posicion >= start && posicion <= end) { $("div#log1").html(posicion); $("div#log2").html(progress); } }); You can see it working here. Hope i can help a little. Good luck and cheers, Rodrigo.

First of all thanks to you Carl, without your input it would have taken a lot of time for me to see where the problem was, so again thanks to you. As i said the only problem with the first example was the delay time, it was as simple as changing this: TweenMax.fromTo(fondo1, 0.7, {autoAlpha:0, scaleX:0.1, scaleY:0.1}, {autoAlpha:1, scaleX:1, scaleY:1, delay:0.05}); to this: TweenMax.fromTo(fondo1, 0.7, {autoAlpha:0, scaleX:0.1, scaleY:0.1}, {autoAlpha:1, scaleX:1, scaleY:1, delay:j*0.05}); As Carl said in his first response: And the code posted by Carl works an does the trick very good, so if any one else is interested in doing something like this could use either one of the codes, Carl's or mine. As for your tutorial Carl just one word: AWESOME!!! Thank you again, Rodrigo.

Hi, This post has been extremely helpful and for that i thank treeloy and the admin. Using the code given here i have created my own grid but there is something i want to achieve but reducing the amount of code involved. I uploaded the examples here in order to explain myself correctly. The code of the first example is as follows: FIRST FRAME import com.greensock.*; this.stop(); var cont1:MovieClip = new MovieClip(); var delay:Number = 0; btn1.addEventListener(MouseEvent.CLICK, btn1ck); function btn1ck(e:MouseEvent):void{ gotoAndPlay("2"); } SECOND FRAME this.stop(); addChild(cont1); cont1.x = 600; cont1.y = 5; TweenMax.to(cont1, 0.5, {x:5}); for (var i:Number = 0; i < 7; i++) { for (var j:Number = 0; j < 9; j++) { var fondo1:MovieClip = new cuadro(); fondo1.x = 25 + fondo1.width * j; fondo1.y = 25 + fondo1.height * i; cont1.addChild(fondo1); fondo1.alpha = 0; TweenMax.fromTo(fondo1, 0.7, {autoAlpha:0, scaleX:0.1, scaleY:0.1}, {autoAlpha:1, scaleX:1, scaleY:1, delay:0.05}); } } btn2.addEventListener(MouseEvent.CLICK, btn2ck); function btn2ck(e:MouseEvent):void{ gotoAndPlay("1"); removeChild(cont1); } AS you can see what i achieve is a well defined grid that expands an moves from right to left, then the idea is to continue from center to the left of the screen in order for the grid to disappear. But what i want to achieve is what happens in the second example because in the first one all the grid components expand at the same time while in the second example they do it in sequence. The point is that the second example is made with quite an amount of code that could and it would probably cause problems in the future. Here is the code of the second example: FIRST FRAME import com.greensock.*; this.stop(); var cont1:MovieClip = new MovieClip(); var delay:Number = 0; var delay2:Number = 0; var delay3:Number = 0; var delay4:Number = 0; var delay5:Number = 0; var delay6:Number = 0; var delay7:Number = 0; btn1.addEventListener(MouseEvent.CLICK, btn1ck); function btn1ck(e:MouseEvent):void{ gotoAndPlay("2"); } SECOND FRAME addChild(cont1); cont1.x = 600; cont1.y = 5; TweenMax.to(cont1, 0.5, {x:5}); for (var i:Number = 0; i < 9; i++){ var fondo1:MovieClip = new cuadro(); cont1.addChild(fondo1); fondo1.x = 25 + fondo1.width * i; fondo1.y = 25; fondo1.alpha = 0; TweenMax.fromTo(fondo1, 0.5, {autoAlpha:0, scaleX:0.1, scaleY:0.1}, {autoAlpha:1, scaleX:1, scaleY:1, delay:delay}); delay += 0.05; } for (var j:Number = 0; j < 9; j++){ var fondo2:MovieClip = new cuadro(); cont1.addChild(fondo2); fondo2.x = 25 + fondo2.width * j; fondo2.y = 75; fondo2.alpha = 0; TweenMax.fromTo(fondo2, 0.5, {autoAlpha:0, scaleX:0.1, scaleY:0.1}, {autoAlpha:1, scaleX:1, scaleY:1, delay:delay2}); delay2 += 0.05; } for (var k:Number = 0; k < 9; k++){ var fondo3:MovieClip = new cuadro(); cont1.addChild(fondo3); fondo3.x = 25 + fondo3.width * k; fondo3.y = 125; fondo3.alpha = 0; TweenMax.fromTo(fondo3, 0.5, {autoAlpha:0, scaleX:0.1, scaleY:0.1}, {autoAlpha:1, scaleX:1, scaleY:1, delay:delay3}); delay3 += 0.05; } for (var l:Number = 0; l < 9; l++){ var fondo4:MovieClip = new cuadro(); cont1.addChild(fondo4); fondo4.x = 25 + fondo4.width * l; fondo4.y = 175; fondo4.alpha = 0; TweenMax.fromTo(fondo4, 0.5, {autoAlpha:0, scaleX:0.1, scaleY:0.1}, {autoAlpha:1, scaleX:1, scaleY:1, delay:delay4}); delay4 += 0.05; } for (var ñ:Number = 0; ñ < 9; ñ++){ var fondo5:MovieClip = new cuadro(); cont1.addChild(fondo5); fondo5.x = 25 + fondo5.width * ñ; fondo5.y = 225; fondo5.alpha = 0; TweenMax.fromTo(fondo5, 0.5, {autoAlpha:0, scaleX:0.1, scaleY:0.1}, {autoAlpha:1, scaleX:1, scaleY:1, delay:delay5}); delay5 += 0.05; } for (var ij:Number = 0; ij < 9; ij++){ var fondo6:MovieClip = new cuadro(); cont1.addChild(fondo6); fondo6.x = 25 + fondo6.width * ij; fondo6.y = 275; fondo6.alpha = 0; TweenMax.fromTo(fondo6, 0.5, {autoAlpha:0, scaleX:0.1, scaleY:0.1}, {autoAlpha:1, scaleX:1, scaleY:1, delay:delay6}); delay6 += 0.05; } for (var ik:Number = 0; ik < 9; ik++){ var fondo7:MovieClip = new cuadro(); cont1.addChild(fondo7); fondo7.x = 25 + fondo7.width * ik; fondo7.y = 325; fondo7.alpha = 0; TweenMax.fromTo(fondo7, 0.5, {autoAlpha:0, scaleX:0.1, scaleY:0.1}, {autoAlpha:1, scaleX:1, scaleY:1, delay:delay7}); delay7 += 0.05; } btn2.addEventListener(MouseEvent.CLICK, btn2ck); function btn2ck(e:MouseEvent):void{ gotoAndPlay("1"); removeChild(cont1); } As i said in the beginning what i want is what happens in the second example but i want to reduce the amount of code involved, but i haven't been able to make it happen from the code of the first example. Any help will be extremely helpful. Thank you, Rodrigo.