Convoluted code for playing and reversing a timeline (animated header on scroll)

[NickWoodward]

Was just looking for a little bit of advice if anyone can take a look please. My code for playing and reversing an animation that changes the background color of a header when scrolling just seems overly complicated:
 

  if(scrollTop > 0) {
    if(tl.reversed()) {
      tl.reverse();
      tl.play();
    } else {
      tl.play();
    }
  } else {
    tl.reverse();
  }

Is there a better way to write this? Yeah it works, but I'd like to look like I know what I'm doing 😄

Also, if you look at the codepen, I'm a bit surprised that the animation reverses not to the original background color of grey, but of a transparent white `rgba(0,0,0,0)` - I thought I didn't have to set the defaults in gsap?

Thanks!

See the Pen xxZJjaa?editors=1111 by nwoodward (@nwoodward) on CodePen

[NickWoodward]

* the reversed timeline going to the wrong background color seems like it might be a bug in firefox ? It works fine in the chrome codepen and on my site, but the behaviour is different in firefox on both

[ZachSaucier]

Hey Nick.

 

11 minutes ago, NickWoodward said:

Is there a better way to write this?

Definitely  I'd use ScrollTrigger:

See the Pen bGEjjgQ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

14 minutes ago, NickWoodward said:

Also, if you look at the codepen, I'm a bit surprised that the animation reverses not to the original background color of grey, but of a transparent white `rgba(0,0,0,0)` - I thought I didn't have to set the defaults in gsap?

Yep, this is due to Firefox misreporting the value originally. You can use a .fromTo() instead.

See the Pen WNrKKpP?editors=0010 by GreenSock (@GreenSock) on CodePen

[NickWoodward]

Thanks Zach,

Not to question the wisdom of using scrollTrigger - having seen what little I have of gsap I have no doubt it's the way to do it - but I'm going to be going to interviews soon and like to be able to justify use of plugins etc.

My reasoning for gsap is - I'm not good with animation and want all the hardware acceleration, cross browser compatibility and considerations of which property I should or shouldn't animate to be dealt for me (I'm right about that last one, right? 😅)

Is the same reasoning broadly true of scrollTrigger? I just don't want to be hit with a 'why use a plugin for a simple header effect' question and not have a solid answer 🙂

Good to know about Firefox, will use fromTo.

Anyway, I better start looking at scrollTrigger. Much appreciated!

Nick

[ZachSaucier]

3 minutes ago, NickWoodward said:

I'm going to be going to interviews soon and like to be able to justify use of plugins etc.

Best of luck!

 

3 minutes ago, NickWoodward said:

My reasoning for gsap is - I'm not good with animation

That's not a great reason  Lots of very skilled people use GSAP. If you want to say GSAP makes animating easier that'd be fine.

 

6 minutes ago, NickWoodward said:

want all the hardware acceleration, cross browser compatibility

You can make use of these things without GSAP, it's just less convenient to do so.

 

7 minutes ago, NickWoodward said:

considerations of which property I should or shouldn't animate to be dealt for me

I'm not sure I understand what you're saying. What do you mean?

 

7 minutes ago, NickWoodward said:

I just don't want to be hit with a 'why use a plugin for a simple header effect' question and not have a solid answer 🙂

The best answer would be something along the lines of "It allows me to develop things more quickly and focus on the animation instead of the implementation details."

 

With that being said, in an interview I would likely talk about both approaches and likely ask them which implementation they'd prefer. It'd be good to have a solid understanding of how to do things without GSAP/ScrollTrigger. FYI if not using GSAP, it would likely be best to use CSS transitions and some very basic JS class toggling. Of course more complex scroll animations would be really difficult if not possible using that approach.

[NickWoodward]

Quote

That's not a great reason  Lots of very skilled people use GSAP. If you want to say GSAP makes animating easier that'd be fine.

Yeah, pretty much a tongue in cheek way of saying that!

What I meant to say was, especially RE hardware acceleration and compatibility, is that animation isn't really a strong point of mine (yet?) and I didn't want to forget or miss what seem to be a variety of pitfalls - using gsap seemed a good way to do that? But like you said, maybe I should just be solid with both.

 

25 minutes ago, ZachSaucier said:

I'm not sure I understand what you're saying. What do you mean?

I thought there were several properties that it wasn't performant to animate, and that gsap was just applying transforms to the properties I changed? Or do I have to be wary of the properties I change in gsap too? Sorry I'm pretty new to animation in general.

 

25 minutes ago, ZachSaucier said:

it would likely be best to use CSS transitions and some very basic JS class toggling.

Yeah, that's what I was initially doing, but then I realised I was adding a class that altered the height of the header when I think I should have been scaling it(?).
I've some basic understanding of css animation, but yeah, I've got a course by Rachel Nabors on css motion design that I'm planning to watch - wanting to learn more about SVGs I watched Sarah Drasner's course first. Probably the wrong way around looking at it now

I think for the time being then I'll stick to simple css animations for the menu, and use gsap for animating the navbar that staggers in, and some of the stagger effects on .card elements

Sorry for the rambling, helpful to lay it out though 🙂

[ZachSaucier]

2 minutes ago, NickWoodward said:

I didn't want to forget or miss what seem to be a variety of pitfalls - using gsap seemed a good way to do that? But like you said, maybe I should just be solid with both.

Ya, GSAP can help but it won't fix all issues you can create  It's best to understand what's happening regardless.

 

4 minutes ago, NickWoodward said:

I thought there were several properties that it wasn't performant to animate, and that gsap was just applying transforms to the properties I changed? Or do I have to be wary of the properties I change in gsap too?

GSAP animates whatever you tell it to animate whether or not they are unperformant properties. It gives developers full control over their animations in an easier way. With that being said, GSAP's x and y properties animate the transform of an element instead of the top/left. They're not interchangeable in every circumstance but transforms are more performant. In other words GSAP doesn't prevent you from animating unperformantly - it just tries to encourage good practices.

 

6 minutes ago, NickWoodward said:

I think for the time being then I'll stick to simple css animations for the menu, and use gsap for animating the navbar that staggers in, and some of the stagger effects on .card elements

If you're going to use GSAP once in a page you might as well use it in most if not all places  

[NickWoodward]

Thanks for the help, think it's best to brush up on css animations and then come back to gsap!

[GreenSock]

3 hours ago, ZachSaucier said:

 

3 hours ago, NickWoodward said:

Also, if you look at the codepen, I'm a bit surprised that the animation reverses not to the original background color of grey, but of a transparent white `rgba(0,0,0,0)` - I thought I didn't have to set the defaults in gsap?

Yep, this is due to Firefox misreporting the value originally. You can use a .fromTo() instead.

Just to be clear, the problem is that you're using "background" instead of "backgroundColor". It's generally not a good idea to use a property that has a bunch of potential complex values in it in varying orders. 👍

[NickWoodward]

39 minutes ago, GreenSock said:

Just to be clear, the problem is that you're using "background" instead of "backgroundColor"

Nice, I wouldn't have considered that, thanks!