Jump to content
GreenSock

jstafford

TweenMax transition breaks when going from version 1.8.4 to latest versions

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

That was it Tahir! Thank you very much.

Link to comment
Share on other sites

  • 1 month later...

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.
×