Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Rodrigo last won the day on March 17 2019

Rodrigo had the most liked content!

Rodrigo

Moderators
  • Posts

    1,768
  • Joined

  • Last visited

  • Days Won

    158

Posts posted by Rodrigo

  1. 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 :P

     

    Cheers,

    Rodrigo.

  2. 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.

    • Like 1
  3. 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.

    • Like 2
  4. 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 :mrgreen: .

     

    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.

  5. 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.

  6. 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.

    • Like 2
  7. 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.

    • Like 1
  8. 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.

  9. 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.

  10. 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.

  11. 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.

    • Like 3
  12. 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)

     

    horscroll.jpg

     

    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 )

     

    horscroll2.jpg

     

    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.

    • Like 2
  13. Well, first of all...great that you reply to a beginners question :-P

     

    No problemo my friend, here to help ;).

     

    I see what your doing..but i don't understand what the 'between 0 and 1 ' is doing in your var progress...1 / ( end - start ) . Where does the '1' comes from ?

     

    There are two public method called "progress" and "totalProgress" for both TweenMax and TimelineMax; i'll just quote some of the api reference:

     

    progress(value:Number):*

    Gets or sets the tween's progress which is a value between 0 and 1 indicating the position of the virtual playhead (excluding repeats) where 0 is at the beginning, 0.5 is halfway complete, and 1 is complete.

    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.

     

    i did look at your example rodrigo..but i like to understand stuff ..not just copy it and implement...

     

    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.

  14. 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.

    • Like 1
  15. 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:

    In my loop all the tiles have the same tween except the delay is based on what column they live in.

     

    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.

  16. 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.

×