Jump to content
Search Community

Difficulty converting a CSS3 transition into a GSAP controlled transition

jstafford test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

Link to comment
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. :)

Link to comment
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?

Link to comment
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...

Link to comment
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
Link to comment
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)

Link to comment
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
Link to comment
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
Link to comment
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%;
}
Link to comment
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


Link to comment
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.

Link to comment
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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...