Jump to content
GreenSock

ericnguyen23

Animate Bootstrap's navbar background-color

Recommended Posts

Hi animators!

 

I'm attempting to animate Bootstraps navbar in my create-react-app.

 

I'm able to animate border, however cannot animate background color.

 

I have 2 questions:

  1. Most pressing: How to I animate .navbar background-color?
  2. How do I animate border-bottom so that it appears from left to right instead of just fading in?

 

Thanks! 

See the Pen WBMVjJ by ericnguyen23 (@ericnguyen23) on CodePen

Link to comment
Share on other sites

23 minutes ago, ericnguyen23 said:

Most pressing: How to I animate .navbar background-color?

 

You can't animate something that has !important. You're going to have to figure out a fix so you're not targeting something with !important. I just wouldn't use Bootstrap. 

 

23 minutes ago, ericnguyen23 said:

How do I animate border-bottom so that it appears from left to right instead of just fading in?

 

You need to animate the width or scaleX of something like div or svg.

 

Example animating a div from the center. Close enough.

 

See the Pen rQwwjj by osublake (@osublake) on CodePen

 

  • Like 4
Link to comment
Share on other sites

 

I removed Bootstrap's "bg-light" class and now animating background color works. That class seemed to override any background-color values.

  • Like 1
Link to comment
Share on other sites

Another layer to add on top of initial question:

 

I'm trying to implement Scrollmagic therefor need to convert my TweenLite animation into a timeline.  The only issue is this is a React functional component which uses Hooks instead of class component features. Any GSAP React developers know how to implement?

Link to comment
Share on other sites

12 minutes ago, OSUblake said:

 

What's wrong with using classes?

 

Try searching React docs, like useRef.

https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables

 

 

I prefer using class components myself when implementing GSAP timeline and ScrollMagic however this is an existing component that (w/o going into too much detail) cannot be changed to a class component. 

 

Link to comment
Share on other sites

I haven't used hooks but I think that useRef is what you need. It's like using this on a class.

  • Like 2
Link to comment
Share on other sites

I was able to implement timeline and Scrollmagic using useEffect( ) and passing animation configs into setAnimation( )  and getting it to work in my local react project.

 

Although I'm unable to reproduce this in Codepen for some reason so here's the setup in case anyone is wondering:

 

const NavBar = () => {

  const [animation, setAnimation] = useState(null);
  
  let tl = new TimelineMax();
  let controller = new ScrollMagic.Controller();

  useEffect(() => {
    setAnimation(
      // GSAP timeline config
      tl
        .to('.navbar', 0.25, {
          css: {
            borderBottom: '1px solid rgba(200, 200, 200, 1)',
            backgroundColor: '#ffffff',
          },
        })
    );
    setAnimation(
      // ScrollMagic config
      new ScrollMagic.Scene({
        triggerElement: '#trig',
        triggerHook: 0.2,
        offset: 140,
      })
        .setTween(tl)
        .addTo(controller)
    );
  }, []);
  
  return(
  	// Rendering code here
  )
};

 

 

  • Like 1
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.
×