Jump to content
jstafford

Difficulty converting a CSS3 transition into a GSAP controlled transition

Recommended Posts

See the Pen yYvbGq by jstafford (@jstafford) on CodePen

- CSS3 transition, original navbar

 

 

See the Pen xwYrKx by jstafford (@jstafford) on CodePen

- GSAP controlled transition; not working

 

Hi, I have a CSS3 navbar transition effect that is based on a nice clean underline effect from this article, http://tobiasahlin.com/blog/css-trick-animating-link-underlines/ . Anyway, I got it working in bootstrap and developed it some more so that it responds with active states and smaller devices as well (See 

See the Pen yYvbGq by jstafford (@jstafford) on CodePen

). I was wanting to convert this into a Tweenmax controlled transition but having some problems. My first problem I am encountering is I am NOT hiding the black underline with TweenMax and scaleX:0 like I was in the original CSS3 transition. See 

See the Pen xwYrKx%C2%A0 by jstafford (@jstafford) on CodePen

 

What am I missing?

See the Pen by (@) on CodePen

Share this post


Link to post
Share on other sites

Hi there,

 

 I took a quick look at your codepen and noticed that all the scripts are up in the HTML rather than in the javascript section of the Codepen so I don't think any of them are running. The console is also showing some errors as you're loading jquery and bootstrap from other sources and it's coming back with a 404 error. If you move that javascript, strip the head head elements from the HTML section (not needed on codepen) and load jquery from CodePen, I think you'll be a lot closer to what you want - or at least a lot closer to debugging any problems. :)

Share this post


Link to post
Share on other sites

It is definately my JQuery that can't be seen on both posts. I have done things the Codepen way here (I stripped the html and head out of the posts and included references to bootstrap js, bootstrap css, and jquery for the first post and bootstrap js, bootstrap css, jquery, and Tweenmax in the second post. They both can't see the jquery for some reason?

Share this post


Link to post
Share on other sites

Sorry. just realized my javascript and jquery is under my html . : P

Share this post


Link to post
Share on other sites

Alright, it is now functioning the way it is on my local and my problem is clearly seen in the second post compared to first (black underline is not hidden by Tweenmax's ScaleX). Codepen is still complaining of not being able to load bootstrap and jquery js . Not sure why.

 

Now that I can ask my question now, does anyone have suggestions on what I am doing wrong with TweenMax in the second codepen? It is not hiding the black underline that is initially set with ScaleX: 0

 

Any help please...

Share this post


Link to post
Share on other sites

I see Jack and Jonathan are both online now, so hopefully they can clarify that.

 

I'm curious about it myself since I haven't actually tried tweening pseudo elements.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

TweenMax does load the CSSPlugIn, but not the CSSRulePlugin. I've honestly never used it so I'm curious to hear from the 'big guns' on this one. :)

  • Like 1

Share this post


Link to post
Share on other sites

I am not at my computer right now .. but this codpen should give some ideas on how to get your code working.

 

Lava lamp effect on hover and click:

 

See the Pen wubiq by jonathan (@jonathan) on CodePen

 

Also in your GSAP example you are setting up a tween but not hooking it into your hover events.. I suggest you remove some unneeded code in your GSAP example.

 

You could eventually just have a for loop or a jQuery each() loop and bind your events and each animation inside the loop.So this way each <li> or <a> tag get the hover event binded to them. And the animation in them as well.

  • Like 1

Share this post


Link to post
Share on other sites

Nice Jonathan. I will research this during the evening. Thanks.

Share this post


Link to post
Share on other sites

You're loading TweenMax in your CSS, which is causing errors. You also need to remove all the transitions from your CSS.

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

Sorry guys. I think I see my problem based on what Jonathan supplied me yesterday.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

I suggest that you provide a codepen that is limited and does not have your media queries and the dropdown menu.

 

We only need a limited example. Since what you have now is making it more difficult to debug, since you have a lot of unnecessary code that does not pertain to the issue you are having. Also you should fork your existing codepen instead of changing your first example, which makes debugging the original code harder and takes more time.

 

So just setup another example that is just your list of the menu items, no dropdown, no media queries.

 

The only JS hover event i see is for your dropdown, which we dont need.

 

You need another hover event for your menu items. I suggest you look at my example above and go from there.

 

We need to focus on GSAP specific questions, and unfortunately we do not have time to go through lots of code when all you want to do is animate a line under each menu item. This is due to having to read all your lines of code just  to address a small portion of your code.

 

For example you trying to have the to() tween target :hover pseudo-class and :before pseudo-element.. a:hover:before

 

But when the code runs it doesn't find anyone hovering over the item so it does not get applied. That is why above i suggest you add another hover event through JS so you create a trigger point when hovered.

 

You will have issues even with CSS transitions cross browser by mixing a lot of pseudo-classes with pseudo elements. To many browser bugs dealing with pseudo-elements.

 

So if possible please provide a limited codepen with only the issue you are having, since this is more of a JS implementation of hover event binding question, rather than a GSAP specific question.

 

Also since you are trying to target :before, even jQuery will return an empty collection wrapper when outputted in the console. Object[]. Since technically pseudo elements are not part of the DOM, and are generated content. And thus are not accessed via JavaScript. That is why in my examples above i create a DOM element as my object to animate under the menu lists.

 

Thanks :)

  • Like 2

Share this post


Link to post
Share on other sites

Jonathan is giving some great advice. :)

 

I would (and do) create DOM elements for this kind of hover animation. A simple jQuery prepend would work great in your case. It just seems like a road loaded with problems when you use pseudo elements.

 

That being said, if you absolutely need to use a pseudo element you should take a look at this Greensock pen which uses the CSSRulePlugin and deals with styling pseudo elements.

 

See the Pen atgzI by GreenSock (@GreenSock) on CodePen

  • Like 2

Share this post


Link to post
Share on other sites

okay, I wasn't doing this at all. you actually have to retrieve the :before rule with your selector.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

See the Pen GpQYyo by jstafford (@jstafford) on CodePen

 

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%;
}

Share this post


Link to post
Share on other sites

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


Share this post


Link to post
Share on other sites

Have you tried testing locally outside of codepen when testing the CSSRulePlugin? Codepen will have issues sometimes due to your code running through an iframe on their website.

 

Also above the html you posted has the script tag outside of the body tag, outside of ending body tag and ending html tag.

 

Also the codepen link you sent me via a private message .. you are trying to tween scaleX but your CSS rule has no scaleX CSS property.

 

transform: scaleX(1);

 

So basically you are trying to tween a CSS property with the CSSRulePlugin, and you have not defined it in the CSS stylesheet. But I would test locally or on your remote server if codepen is not behaving.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.