Jump to content
GreenSock

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

jstafford

Members
  • Posts

    182
  • Joined

  • Last visited

Everything posted by jstafford

  1. Hi, I was looking for the Split Text Plugin in my downloads under plugin, and I don't see it. Is it the TextPlugin?
  2. Hi Diaco! Thank you very much for responding to my post. Your code help greatly simplifies things. Thanks. I forked my 2nd codpen where I was attempting to Tween by className instead of css property and I ran into a bit of a hurdle. What am I missing? http://codepen.io/jstafford/pen/wKxwKN I know the mouseenter and mouseleave event is firing when hovering over the links, but nothing happens, no errors. : /
  3. Her is the new topic with cleaner codepen and better explanation. I actually got the className method to work somewhat when refactoring, but it still is having problems. http://greensock.com/forums/topic/12759-converting-tweenmax-styling-with-css-properties-to-tweenmax-styling-by-using-classname-nameofclassinstylesheet/
  4. TweenMax Styling with CSS Properties - works appropriately http://codepen.io/jstafford/pen/LprwWG Using css properties in TweenMax, no classes added, I get the following: - any time I mouseenter/focus on the navigation links (don't worry about dropdown) I get the appropriate hover effect - any time I mouseleave/blur on the navigation links I get the appropriate hover removal effect - can do this how ever many times with success TweenMax Styling by Using "className: '+=nameOfClassInStylesheet' " *does not work appropriately http://codepen.io/jstafford/pen/ojyKEY What I mean by this, is that instead of using the direct class properties like I am in the first codepen, I am adding by className instead using TweenMax. I am trying to do this in favor of above b/c including CSS Styles inside my javascript is a little messier in my opninion. I want to do it this way but can't. - I get the initial mousenter/focus effects when hovering over in initial pass over each of the navigation links - I get the initial mouseleave/blur effect when removing hover over initial pass over each of the navigation links - Subsequent attempts at invoking these effects produce nothing PLEASE DON'T GET OVERWHELMED WITH THE window width logic. If the codepen is > 767, the appropriate hover effect is a black border underline. If less than this, it does the hover effect with a left black border.
  5. Okay, I will come up with a simplified and better explained codepen. I had already ommitted about 90% of the stuff already , but I understand that things aren't always clear when looking at someone else's code.
  6. Tweenmax doing the CSS Styling in "to function" - works , no problems; would like to transition to the following codepen below http://codepen.io/jstafford/pen/avKrZJ CSS Classes in External Stylesheet Added by TweenMax - not working http://codepen.io/jstafford/pen/YyvbeO Hello Greensock Community, I have been doing my CSS Styling in the To funtion of Tweenmax without any problems. Due to the verbose nature of mixing styling with my javascript code , I am refactoring what I have so that the classes are added by TweenMax from a seperate stylesheet. I can't get it to work. It probably is something basic as this is my first time working with className=+ type of syntax with gsap. I am using an older versioin of TweenMax right now because I originally wrote the syntax of the css stylings using 1.84 without fully seperating each property out ; eg. bottomBorder: "1 px solid #000" (not allowed in newer versions of TweenMax I found out --> bottomBorderColor, bottomBorderWidth, etc.Don't think this has anything to do with my problem here with adding className, but I wanted to clarify why my codepens were using an older TweenMax The codepen link below is accidently composed of the two links above that are seperated.
  7. Hi, I spent yesterday afternoon pinpointing the problem on this one, but don't have a real solution yet. Tweenmax 1.8.4 allows my border bottom transition to work (black underline appears under the "Link"s on hover, but when I upgrade to a newer version (like 1.18 or 1.17), it breaks; I am using 1.8.4 here and you can see it working. Specifically, this looks to be centering around how I set the css properties. 1) TweenMax.set way (want to do it this way) var navbarHeight = $(".navbar").height(); TweenMax.set($(".navbar-default .navbar-nav > li > a"), { css: { height: navbarHeight + "px", lineHeight: navbarHeight + "px", borderBottom: "0px solid #000000", color: "#777777", fontWeight: "bold" } }); 2) CSS way (don't want to use css styling to set element properties) .navbar-default .navbar-nav > li > a { /* line-height: 50px; height: 50px; border-bottom: 0px solid #000000; */ } When I uncomment the css styling above, it works, but I really want to set these css properties like I did in the TweenMax.set. What is it about going to a new version of TweenMax that prevents me from doing this? John
  8. It was working properly in Codepen. I will try moving my actual javascript stuff around, but with internal css it worked. Yes, it is the rule that comes back undefined that the TweenMax is trying to tween. It never sees the external css. Anyway, I have given up on this navbar for now. I am just taking your advice and staying away from pseudoelements.
  9. Ah Yes! Thanks PointC. The Tweenmax dependency was a little off , but once fixed it worked great. Thank you so much! I will stay away from pseudoelements for now.
  10. Ah Yes! Thanks PointC. Your codepen had the dependency wrong on the codepen, but once fixed your code worked perfectly. I will take yours and Jonathan's advice and stay away from pseudoelements for now.
  11. Thank you so much for your response Jack. I tried this at home and at work with the same code above (revised above to include external maxcdn and cloudflare links) with same result. It doesn't work for me (ScaleX : 0 does not work and I see the black underline on all menu itmes). I even tried this without bootstrap. I am at a dead end here and really don't want to do a navbar with just CSS3 transitions and want to rely on GSAP.
  12. The codepen below works and shows how scaleX : 0 hides the underline (I will later reveal when each menu item is hovered. My problem is when I move this css to an external stylesheet, the rule is undefined and it can't tween a null target. /*START OF INDEX.HTML*/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <link href="main.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.8.4/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/plugins/CSSRulePlugin.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navbar-collapse-1"> <div id="box"> <ul id="menu" class="nav navbar-nav navbar-right"> <li><a href="#" class="link">Link</a></li> <li><a href="#" class="link">Link</a></li> <li><a href="#" class="link">Link</a></li> <li><a href="#" class="link">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#" >Another action</a></li> <li><a href="#" >Something else here</a></li> </ul> </li> </ul> </div> </div> </div> </nav> </body> <script> $(window).load(function() { alert("window is loaded"); var rule = CSSRulePlugin.getRule(".navbar-default .navbar-nav > li > a:before"); //get the rule TweenMax.set(rule, {cssRule:{scaleX:0.5}}); }); </script> </html> /* END OF INDEX.HTML*/ /*MAIN.CSS*/ .navbar-default .navbar-nav > li > a:before { background-color: #000000; content: ""; height: 3px; position: absolute; bottom: 0; left: 0; width: 100%; } When I moved the css to an internal stylesheet it worked fine (I guess this is what Codepen is evaluating to). CSS, JavaScript, and DOM should load by window.onload, so I am confused why an external stylesheet is not available to the CSSRulePlugin
  13. I figured it out, but still looking for a solution. It turns out that the CSSRulePlugin can't find the exteranl main.css when it uses the "getRule". When I moved the css to an internal stylesheet it worked fine (I guess this is what Codepen is evaluating to). CSS, JavaScript, and DOM should load by window.onload, so I am confused why an external stylesheet is not available to the CSSRulePlugin
  14. http://codepen.io/jstafford/pen/GpQYyo Alright! Got it working on codepen, but not on my local. Any suggestions guys as to why I can get this to work in codepen but I get "Can't tween a null target" error when trying to tween the rule on my local. It is set up exactly the same as my codepen, except the javascript is firing in a window onload event at bottom of html . /*INDEX.HTML*/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="main.css" rel="stylesheet"/> <link href="bootstrap.min.css" rel="stylesheet"/> <script src="jquery-2.1.4.min.js"></script> <script src="TweenMax.min.js"></script> <script src="CSSRulePlugin.min.js"></script> <script src="bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navbar-collapse-1"> <div id="box"> <ul id="menu" class="nav navbar-nav navbar-right"> <li><a href="#" class="link">Link</a></li> <li><a href="#" class="link">Link</a></li> <li><a href="#" class="link">Link</a></li> <li><a href="#" class="link">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#" >Another action</a></li> <li><a href="#" >Something else here</a></li> </ul> </li> </ul> </div> </div> </div> </nav> </body> <script> $(window).load(function() { alert("window is loaded"); var rule = CSSRulePlugin.getRule(".navbar-default .navbar-nav > li > a:before"); //get the rule TweenMax.set(rule, {cssRule:{scaleX:0}}); }); </script> </html> /*MAIN.CSS*/ .navbar-default .navbar-nav > li > a:before { background-color: #000000; content: ""; height: 3px; position: absolute; bottom: 0; left: 0; width: 100%; }
  15. Thanks guys. I am reworking my codepens so I can ask a more fundamental GSAP question that is direct without clutter of other stuff. I will also try out PointC's way of retrieving a rule for a pseudo element.
  16. okay, I wasn't doing this at all. you actually have to retrieve the :before rule with your selector.
  17. I was wrong. I am still struggling to see why the following doesn't work. TweenMax.set($(".navbar-default .navbar-nav > li > a:before"), {scaleX:0}); This should hide the black underline on everything.
  18. Sorry guys. I think I see my problem based on what Jonathan supplied me yesterday.
  19. Jonathan or Blake, my codepens are fixed completely now. I would like to understand a way to make this work the way I have written the transition. Do you guys have suggestions? Why are items underlined in black (should only occur on hover). It is like my scaleX 0 is not working the way it should (i.e. hiding the black underline when not hovered)
  20. Nice Jonathan. I will research this during the evening. Thanks.
  21. Doesn't that come with TweenMax? CSSPlugin? okay, yeah this is a pseudo element and not technically part of the DOM. dang it. I hope it's possible some way.
×