fernandofas
-
Content Count
25 -
Joined
-
Last visited
About fernandofas
-
Rank
Member
Recent Profile Visitors
1,652 profile views
-
Thank you ZachSaucier. Seems like it's working now. Do I always need to use the umd version of the plugins for my projects? Cheers, Fernando
-
Hi Mikel, Thanks for the info, but I'm trying to draw a svg file locally and any other svg that I place is giving me error. If I use the cdn that you provided is not gonna work locally, just on codepen. See file attached. Cheers, Fernando draw.zip
-
HI @mikel, I register the plugin and still not working. I'm attaching the files again and a screenshot. Thank you, Fernando draw.zip
-
Hi guys, I'm replicating this pen locally and there is no way I can make it to work. The console msgs are: index.html:42 Uncaught ReferenceError: gsap is not defined at index.html:42 (anonymous) @ index.html:42 DrawSVGPlugin.js:138 Uncaught SyntaxError: Unexpected token 'export' And this is my index.html file: <!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> <style> body{ background-color:grey; } #hover{ position:absolute; width:200px; top:30px; left:30px; cursor:pointer; } svg{ position:relative; width:200px; } </style> </head> <body> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p> <![endif]--> <div id="hover"> <svg id="ball" viewBox="0 0 82 82"> <circle cx="41" cy="41" r="25" fill="green"/> <circle class="dash" cx="41" cy="41" r="30" fill="none" stroke-dasharray="5" stroke="green" stroke-width="2"/> </svg> </div> <script> var basic = gsap.timeline({repeat:-1, repeatDelay:1}) //.to('.stroke', {autoAlpha:0, duration:0.5}) .to('.dash',{rotation:120, transformOrigin:"center center", strokeDasharray:6, duration:3, ease: "power4.out"},0) .to('.dash',{rotation:-120, transformOrigin:"center center", duration:3, ease: "none"}) .to('.dash',{strokeDasharray:0, duration:3, ease: "power4.out"},'-=2') </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script> <script src="DrawSVGPlugin.js"></script> </body> </html> I'm a business club member. Is there anything that I'm doing wrong or the new gsap is just not getting the parameters? Any help will be appreciate. Kind regards, Fernando Fas draw.zip
-
Awesome as always!!! Well done and great work guys.
-
Hi there, Try to add transformperspective:xxxpx where the xxx is the width of the slide. Plus, z: 0.1, rotationZ: 0.01, force3D: true. That might help. Cheers,
-
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: http://codepen.io/fernandofas/pen/jVyEpg Kind regards, Fernando Fas
-
Hi Petr, Thanks to clarify it. Now I'm gonna do amazing stuff with the plugin. You rock \m/.
-
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
-
Thanks Carl, Sometimes an eye from outside can see better a simple mistake. All good. You are a star. \m/
-
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
-
OSUblake, You are the master blaster. That's exactly what I'm looking for.
-
Hi all, I'm wondering if some of you had the time to work out some code for a magnify effect with greensock. Something like this codepen: http://codepen.io/fernandofas/pen/beqGrM Thanks in advance. Fernando Fas
-
Animate multiple width in a single animation
fernandofas replied to fernandofas's topic in Banner Animation
Hey Carl, You are a star. That's exactly what I was looking for. A big thank you to you. \m/ -
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
