Animate Bootstrap's navbar background-color

[ericnguyen23 8 Likes (Newbie)]

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

[OSUblake 9,990 Likes (Superhero)]

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

 

[ericnguyen23 8 Likes (Newbie)]

 

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

[ericnguyen23 8 Likes (Newbie)]

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?

[OSUblake 9,990 Likes (Superhero)]

6 minutes ago, ericnguyen23 said:

The only issue is this is a React functional component and not a class component. 

 

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

 

[ericnguyen23 8 Likes (Newbie)]

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. 

 

[OSUblake 9,990 Likes (Superhero)]

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

[ericnguyen23 8 Likes (Newbie)]

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