TweenMax transition breaks when going from version 1.8.4 to latest versions

[jstafford 23 Likes (Newbie)]

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

 

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

[Tahir Ahmed 93 Likes (Contributor)]

I think you need to break down your borderBottom into different parts (e.g. borderBottomWeight, borderBottomStyle and borderBottomColor) and pass those instead of the combined borderBottom that you are currently passing.

 

I don't exactly know why does the shorthand borderBottom doesn't work here but at least you have a replacement for that.

 

JavaScript:

var navbarHeight = $(".navbar").height();
TweenMax.set($(".navbar-default .navbar-nav > li > a"), {
  height: navbarHeight,
  lineHeight: navbarHeight + 'px',
  borderBottomWidth: 0,
  borderBottomStyle: 'solid',
  borderBottomColor: '#000',
  color: "#777777",
  fontWeight: "bold"
});
TweenMax.set($(".dropdown-menu"), {
  display: "block",
  autoAlpha: 0
});
$("ul.nav > li > a.link").bind("mouseenter focus", function() {
  if (!$(this).hasClass("active")) {
    TweenMax.to($(this), 0.3, {
      color: "#000000",
      borderBottomWidth: 3,
      borderBottomStyle: 'solid',
      borderBottomColor: '#000'
    });
  }
});
$("ul.nav > li > a.link").bind("mouseleave blur", function() {
  if (!$(this).hasClass("active")) {
    TweenMax.to($(this), 0.3, {
      color: "#777777",
      borderBottomWidth: 0,
    });
  }
});
function markActivePage(activeLinkEl) {
  TweenMax.to($("ul.nav > li > a.link"), 0.3, {
    color: "#777777",
    borderBottomWidth: 0
  });
  TweenMax.to(activeLinkEl, 0.3, {
    color: "#ee3124",
    borderBottomWidth: 3,
    borderBottomStyle: 'solid',
    borderBottomColor: '#ee3124'
  });
}
$('ul.nav > li > a.link').click(function(e) {
  e.preventDefault();
  $('ul.nav > li > a').removeClass('active');
  $('.dropdown-menu > li > a').removeClass('active');
  $(this).addClass('active');
  markActivePage($(this));
});
$('.dropdown,.dropdown-menu').bind("mouseenter focus", function() {
  TweenMax.to($(".dropdown-menu"), 1, {
    display: "block",
    autoAlpha: 1
  });
});
$('.dropdown,.dropdown-menu').bind("mouseleave blur", function() {
  TweenMax.to($(".dropdown-menu"), 1, {
    display: "block",
    autoAlpha: 0
  });
});

Also, as per the documentation of CSSPlugin [Link], as of 1.8.0 version, you don't necessarily need to use the `css:{}` wrapper object around the properties you wish to animate. You could simply skip that and it would still work.

 

Hope this helps.

[jstafford 23 Likes (Newbie)]

That was it Tahir! Thank you very much.

[GreenSock 8,117 Likes (Superhero)]

Sorry about the delay - this should be resolved in the upcoming 1.18.1 release. Thanks for pointing it out. You can preview an uncompressed preview at:

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js