Jump to content
Search Community

LewisOne

Members
  • Posts

    18
  • Joined

  • Last visited

Everything posted by LewisOne

  1. I have to say that the whole using Lint thing can be annoying. It is amazingly helpful for many common errors and troubleshooting, however, it does not like jQuery, GreenSock, or any other of our tools. Most of the time I get a ton of LintErrors and it seems to work perfect. Is there another tool to check to see if you are missing stupid things or to proof work to clean it up like lint does??? A tool like this would be helpful. Right now I use Brackets.io or DreamWeaver but they don't necessarily let you know where the mistake is because most of the time it will give you an error at your last bracket telling you that something is missing where lint tells you which line. Weird.
  2. LewisOne

    Blending

    Very cool.... Brilliant.
  3. LewisOne

    Text Glow

    Jamie's a genius.
  4. LewisOne

    Text Glow

    So, I wanted to animate a glow around some text, but was not happy with the size of the glow size and since css does not have spread like box shadows do I tried this quick fix: TweenMax.set(".text", { textShadow:"10px 0px 20px rgba(255, 255, 255, 1)", textShadow:"-10px 0px 20px rgba(255, 255, 255, 1)", textShadow:"0px 10px 20px rgba(255, 255, 255, 1)", textShadow:"0px -10px 20px rgba(255, 255, 255, 1)" }); However it only fires one of the actions (bottom glow with no top, right, or left)? I thought that maybe it was just a css limit but when I did this it worked like a charm: .text { text-shadow: 5px 0px 10px white, 0px 5px 10px white, -5px 0px 10px white, 0px -5px 10px white; } Still would be cool to animate the glow (make it pulse) but could not get the TweenMax textShadow to work. Any Ideas? I'm pretty darn sure I'm just formatting it wrong.
  5. Oh man, I'm glad you folk are so freeking smart, hahaha. I have been trying to use the set() for a while and could not seem to get it to work. I have been using it wrong by putting a timing value on it (just changing to to set). Duh, lol. Greenfully appreciated guys. Some day I will be a master.
  6. mmmm, interesting. I changed it to use just this: TweenMax.to(".artIcon", 0, {borderRadius: "50%"}); <---zero because this is the initial state of the object then it gets animated later and on your codepen it still works great???? I've gotten this to work really well on all browsers but Chrome in my version, unless I don't initialize the DIV with the css up front. I haven't figured out why yours works yet. I'll mess with it some more. http://new.bpbenger.com/cart.html So the initial state of the box is round, and on mouse over it is square and goes back on mouse out. This whole site is square on Chrome without that added css initially. Thanks for your help on this, I'll keep playing with it.
  7. Wow, CodePen is pretty cool. lol I'm sure it's something stupid im not doing. http://codepen.io/LewisOne/pen/LpisI I commented out the css to show that in chrome the border radius inst working. if you un-comment the stuff then it magically starts working.
  8. I just want to throw some knowledge out there to the Green World with something I've been having issues with. I've been struggling with the corner radius not masking any image background or <img> in a <div> using css or a GS tweens. After much searching I finally found a workaround, although I don't really know why it works, lol. In your css If you place this webkit-mask-image it will mask the border. I honestly have no idea what all the goobly text is, but this works like a Harry Potter Magic Wand Spell in all my images without changing anything. DO: .object { overflow: hidden; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); } then: TweenMax.to(".object", 0, {borderRadius: "50%"}); OR: .object { overflow: hidden; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); } If anyone has a simpler solution or explain a better version of this, or knows why this works, let me know.
  9. Ok, I'm doing things correct then. At first, I was trying to put everything into the button code that I wanted it to do (like I do in AS3) and then just duplicate it for my second button with new things going on. I didn't relaise that the actions have to be outside the buttons and now that I only use the buttons to play/reverse/pause/etc it works like a charm. I was also stuck on how to make only one work onLoad. I stumbled upon in frustration (trying stuff randomly) that I can pause the timeline at the beginning of the code to get it to stop playing, lol. Thanks for your encouragement and feedback, you are my fertilizer to make my webGardening easier.
  10. I don't really like the solution, but I figured out if I did this it seems to work: my goal is for the other animation not to play in the beginning. It works, but Is this a good solution or is there a better way??? var tlHome = new TimelineMax(); var tlService = new TimelineMax(); tlHome.play(); tlService.pause(); tlHome.to(coolStuff) tlService.to(coolStuff}) $("#buttonone").click(function() { tlone.play(); tltwo.reverse(); }); $("#buttontwo").click(function() { tltwo.play(); tlone.reverse(); }); I think that I figured out that i need to only use the buttons to play, reverse, pause, etc.
  11. I'm trying to understand what I'm not doing right. I can get this to work with one timeline and reverse, but when I add another timeline it does nothing. Any ideas on the concept. var tlone = new TimelineMax(); var tltwo = new TimelineMax(); $("#buttonone").click(function() { tlone.to(homePage, 2, {somestuff}) .to(servicePage, 2, {morestuff}) tltwo.reverse(); }); $("#buttontwo").click(function() { tltwo.to(homePage, 2, {somestuff}) .to(servicePage, 2, {morestuff}) tlone.reverse(); });
  12. LewisOne

    Blending

    Super interesting way to do it, however I can't get it to work in FF (no beginning image or anything, mouseovers don't work) but works in Safari. I get the concept of how you did it, I'll mess with it some more.
  13. LewisOne

    reverse button

    ah, I see the problem, im having a simular issue. So I know that this isn't a GS issue, but how can you keep the new TimelineMax() stattements out of the button/function and it still work. I tried this with no luck... tl = new TimelineLite(); window.onload = function() { var logo = document.getElementById("logo"); var btn = document.getElementById("btn") ; tl.from(logo, 1, {bottom:"600px", top:"500px", scale:"0px", autoAlpha:"0"}); tl.from(btn, 1, {bottom:"500px", top:"500px", opacity:"0", fade:"0", rotation:"-180"}); } btn.click(function(){ tl.reverse(); }); I am trying to do the same thing but with two buttons, one with the timeline going forward and the other with it going reverse, but if the new timeline statement isnt inside the button it does not work.
  14. LewisOne

    Blending

    The codepen link is broke???
  15. LewisOne

    Blending

    AAAhhhh, I need to activate the colorProps plugin. Works like a charm... duh. hahahaa If anyone has some cool ways to color stuff let me know. Thanks Team.
  16. LewisOne

    Blending

    I was trying to figure out how to create a color blend within tweenMax. I can set it with css3 and my goal is to do a mouseOver that changes the colors of the blend, then changes back when mouseOut. So the top of the div is blue and bottom yellow, when mouse over it goes from green to yellow. Also for radial blending and such. Any resources???
  17. Hahaha, very nice. And I'm here trying to make it even more coplicated. Works great. Thanks Dude.
  18. $(mindis).readyto(function () {TweenLite.rocks(["#theinternet", 2, {theLeft:"100%", andTheTop:"100%", autoMatic:"#1"})

  19. I've been looking for a better way to code and animate Accordian's to unleash some creativity. I've been playing around with GSAP a lot lately trying to do some of the cool animation effects I have liked in flash using GS), and making them browser compatible. I thought of a cool way to do accordians that you have total visual control over. All of the other JavaScript one's or the SPRY assets that I have used in the past, have been very confusing and not very graphically customizable -as well as not very browser friendly. This is my start of one that I feel can go just about anywhere, in any direction (including diagonal) thanks to Mr. Green. I used super simple CSS. I added in an alpha change because the objects inside of the div would stay visible and cover stuff, but there is probably a much better way to do it. Here is the start of the simple code I came up with so far, let me know what you think: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Test</title> <style type="text/css"> .containers { /* [disabled]margin: 10px; */ /* [disabled]float: left; */ height: 507px; width: 421px; position: absolute; background-color: #0F0; display: inline-table; white-space: normal; } .boxes { background-color: #FFF; float: left; height: 50px; width: 400px; position: relative; margin-right: auto; margin-left: 10px; } </style> </head> <body> <div class="containers"> <div class="boxes" id="a"> <div align="center">a</div> </div> <div class="boxes" id="a1"> <div align="center">a-1</div> </div> <div class="boxes" id="b"> <div align="center">b</div> </div> <div class="boxes" id="b1"> <div align="center">b-1</div> </div> <div class="boxes" id="c"> <div align="center">c</div> </div> <div class="boxes" id="c1"> <div align="center">c-1</div> </div> </div> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="js/greensock/minified/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="js/greensock/minified/easing/EasePack.min.js"></script> <script type="text/javascript" src="js/greensock/minified/TweenLite.min.js"></script> <script type="text/javascript" src="js/greensock/minified/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="js/greensock/minified/plugins/CSSRulePlugin.min.js"></script> <!--start events--> <script> $(document).ready(function () { TweenLite.to(a1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); TweenLite.to(b1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); TweenLite.to(c1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); }); $("#a").click(function() { TweenLite.to(a1, 1, {css:{height:50, alpha:1}, ease:Cubic.easeOut}); TweenLite.to(b1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); TweenLite.to(c1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); }); $("#b").click(function() { TweenLite.to(a1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); TweenLite.to(b1, 1, {css:{height:50, alpha:1}, ease:Cubic.easeOut}); TweenLite.to(c1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); }); $("#c").click(function() { TweenLite.to(a1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); TweenLite.to(b1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); TweenLite.to(c1, 1, {css:{height:50, alpha:1}, ease:Cubic.easeOut}); }); </script> </body> </html>
×
×
  • Create New...