Jump to content
GreenSock

fernandofas

Members
  • Posts

    20
  • Joined

  • Last visited

Posts posted by fernandofas

  1. Hi guys,

     

    I just an article on the GSAP Blog about the "will-change" and Chrome issue with scaling images and after copying the codepen provided in the article I started to play around a solution that possibly could help lots of devs around.

     

    So, if you read this article http://greensock.com/will-change, you will see that the first image get blurry when scaling.

     

    I added "transformPerspective" and "z" properties on the animation and the scaling goes smoothly and works well.

     

    I have been using it for a while now and I hope you guys can find it useful as well.

     

    See the codes modified here: 

     

     

    Kind regards,

     

    Fernando Fas

     

     

    See the Pen jVyEpg by fernandofas (@fernandofas) on CodePen

  2. Hi there,

     

    I'm starting to use DrawSVG and I really can't make the drawing properly.

     

    I read the tutorials and watched the videos a few times and all that I need is to make the drawing properly.

     

    Firstly, I don't want the text coming up first, I want the drawing happening along the duration of the tween and revealing the text.

     

     

    Please let me know what's is wrong with my pen.

     

    It's an excellent plugin and we have the business club here at work, but I'm testing all the plugins before we place into our production.

     

    Any help it will be great.

     

     

    Kind regards,

     

     

    Fernando Fas

    See the Pen LkXxLm by fernandofas (@fernandofas) on CodePen

  3. Hi guys,

     

    I'm testing the morphsvg and splittext plugins and got something interesting.

    After read the tutorials and following the videos from the website, my results didn't match the tutorials and I would like to know why.

     

    Strangely, when the splittext is running, it grabs all the javascript codes and post it as a text.

    I'm sure that is not common, but I have no idea atm what's going on.

     

    If you could have a look and reply to this treat it will be great.

     

    Kind regards,

     

    Fernando Fas

    See the Pen wWEJbE by fernandofas (@fernandofas) on CodePen

  4. Hi there,

     

    I'm wondering if is possible to load an animation with different width and a small delay each time the width gets bigger.

     

    For example:

     

    This is the original code:

     

    The css for the <div cortana_blurb> is set to width: 0;

     

    MU.showBlurb = function(){
    TweenMax.to(cortana_blurb, .15, {width: 34,  ease:Linear.easeNone}), .4;
    TweenMax.to(cortana_blurb, .15, {width:64, ease:Linear.easeNone, delay:.4 });
    TweenMax.to(cortana_blurb, .15, {width:111, ease:Linear.easeNone, delay:.8 });
    TweenMax.to(cortana_blurb, .15, {width:144, ease:Linear.easeNone, delay:1.2 });
    TweenMax.to(cortana_blurb, .15, {width:204, ease:Linear.easeNone, delay:1.6 });
    }
     
    What I want is to minimize it to one line code like:
     
    MU.showBlurb = function(){
    TweenMax.to(cortana_blurb, .15, {width: 34, 64, 111, 144, 204, ease:Linear.easeNone}), .4;
    }
     
    I know it's a trick one, but if there is a way to do it and you guy could help me it will be great.
     
    Kind regards,
     
    Fernando Fas

     

  5. Hi everyone,

     

    I'm trying to animate two paths at the same time using svg paths and javascript, but seems something is not right with my codes where I can't find out what is missing.

     

    I want each box to run on the different paths.

     

    Any idea/s what is wrong with this code?

     

    See on codepen:

     

     

     

    Thank you very much in advance.

     

    Kind regards,

     

     

    Fernando Fas

    See the Pen WrQeOp by anon (@anon) on CodePen

  6. Hi Dipscom,

     

     

    Thanks for your reply.

     

    I'm really struggling on looping the whole animation.

    I've read many different options, but unfortunately none worked for me.

     

    Do you think there is a proper way to make it work?

     

    Let's say I want to loop the animations 3 times from start to finish.

     

    Thank you very much in advance.

  7. Hi sommambist,

     

    Thank for your reply.

     

    I working on banners for Atlas ( a Facebook company ) and they use this link to go through '<a href="{{PUB_CLICKTHROUGH}}" target="_blank"></a>.

    The syntax for the click event is great, thanks.

     

    I'm not sure where to place the link. Shall it be in the "div" after publish or somewhere else?

     

    Thank you.

×