Jump to content
Search Community

George Carlin

Members

  • Posts

    12

  • Joined

  • Last visited

 Content Type 

Posts posted by George Carlin

    transition in old IEs

    in GSAP

    Posted

    actually I was more concern about the easing matters, but then I did a test with greensock on IE 8 and it worked good.

    I'm just a bit curious to know how easings work on IE 8 when it does not support CSS transitions!

    easing and text color is not working in my tweenmax code

    in GSAP

    Posted

     

    Hi George Carlin  :)

     

    pls check CSSPlugin Doc. : http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/

     

    Note about css:{} wrapper

     

    Originally, css-specific properties needed to be wrapped in their own object and passed in like TweenLite.to(element, 1, {css:{left:"100px", top:"50px"}}); so that the engine could determine the properties that should be funneled to CSSPlugin, but because animating DOM elements in the browser is so common, TweenLite and TweenMax (as of version 1.8.0) automatically check to see if the target is a DOM element and if so, it creates that css object for you and shifts any properties that aren't defined directly on the element or reserved (like onComplete, ease, delay, etc. or plugin keywords like scrollTo, easel, etc.) into that css object when the tween renders for the first time. In the code examples below, we'll use the more concise style that omits the css:{} object but be aware that either style is acceptable.

    //as of 1.8.0 the following lines produce identical results:

    TweenLite.to(element, 1, {top:"20px", backgroundColor:"#FF0000", ease:Power2.easeOut});

    //longer, less convenient syntax:

    TweenLite.to(element, 1, {css:{top:"20px", backgroundColor:"#FF0000"}, ease:Power2.easeOut});

     

    so if I had several tweens, I need to either put all of em in css (if it is seriously necessary) or don't us css at all. Am I right?

    easing and text color is not working in my tweenmax code

    in GSAP

    Posted 



    
$(document).on("mouseenter", "#numbers", function(){
    
    TweenMax.to(footer_number, 0.5, {
    
        css:{fontSize:new_footer_number_fontSize+"px"},
    
        textShadow:"2px 2px 15px rgba(145, 233, 0, 1)",             
    
        color:"#91ff00",
    
        ease:Power4.easeOut
    
    });
    
});
    
$(document).on("mouseleave", "#numbers", function(){
    
    TweenMax.to(footer_number, 0.5, {
    
         css:{fontSize:old_footer_number_fontSize+"px"},
    
         textShadow:"0px 0px 0px rgba(0, 0, 0, 0)",             
    
         color:"#d6d6d6",
    
         ease:Power4.easeOut
    
    });
    
});


    am i doing something wrong?

    Swing Motion Problem

    in GSAP

    Posted

     

    hi I want to make my div animated like this swf file.

    but it sound's to me like I can't do so because of my misunderstanding of transformOrigin system.

    here is my code:

    js:

    TweenLite.set("#pageone", {perspective:750});

    window.onload = function(){
          tweens();
    };
    function tweens(){
          TweenLite.set("#header",{rotationX:180,opacity:0});
          TweenLite.to("#header", 2.5,{rotationX:0,opacity:1, transformOrigin:"0px 0px 0px",ease: Elastic.easeOut.config(1, 0.3)});
    }
    html:
    <body>
    <div data-role="page" id="pageone">
        <header>
            <div id="header"></div>
            </header>
        </div>
    </body>
    the tween happens but not as expected.

     

    I have found the solution.

    I removed 4 lines of css property of header id, and it works great, these are those lines:

    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;
    transition: 0.5s ease-out;

    Swing Motion Problem

    in GSAP

    Posted

    hi I want to make my div animated like this swf file.

    but it sound's to me like I can't do so because of my misunderstanding of transformOrigin system.

    here is my code:

    js:

    TweenLite.set("#pageone", {perspective:750});

    window.onload = function(){
          tweens();
    };
    function tweens(){
          TweenLite.set("#header",{rotationX:180,opacity:0});
          TweenLite.to("#header", 2.5,{rotationX:0,opacity:1, transformOrigin:"0px 0px 0px",ease: Elastic.easeOut.config(1, 0.3)});
    }
    html:
    <body>
    <div data-role="page" id="pageone">
        <header>
            <div id="header"></div>
            </header>
        </div>
    </body>
    the tween happens but not as expected.

    using vars instead of numbers

    in GSAP

    Posted

     

    Hi frost  :)

     

    pls try this : 

    TweenMax.to("#gallery",1,{ rotationY:GrotY , opacity:0 , transformOrigin:"50% 50% "+zValue , ease:Power4.easeOut });

    IT WORKED, I HAVE NOT RECEIVED SUCH FAST CORRECT ANSWER WHOLE MY LIFE. THANKS A MILLION

    • Like 4

    using vars instead of numbers

    in GSAP

    Posted

    in following tween I need to use a var instead of number in transform origin area. I did change the number with a variable but it's not working.

    TweenMax.to("#gallery", 1,{rotationY:GrotY,opacity:0, transformOrigin:"50% 50% zValue",ease:Power4.easeOut});

    as you can see same job works for rotationY value.

×
×
  • Create New...