Jump to content
GreenSock

Rodrigo last won the day on May 2 2021

Rodrigo had the most liked content!

Rodrigo

Moderators
  • Posts

    2,114
  • Joined

  • Last visited

  • Days Won

    168

Everything posted by Rodrigo

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
×