Fun with tables? (Animating pseudo elements)

[NickWoodward]

Couple of questions if someone doesn't mind!

I'm currently making a table that has a row hover effect, and a before pseudo element added/styled on selection.

1. Can this (the linked codepen) be animated to look good? Like maybe the hover color slides out to leave the selected style on the pseudo element?  I'm really crap at designing animations, and I guess if this is a lost cause it would allow me to sidestep a challenge completely (😄) 
2. How should I implement this? I've read that CSSRulePlugin is deprecated and that I should use CSS variables to style pseudo elements instead, but don't I need to change my whole approach to selecting and styling a row?

At the moment I'm adding an active class and styling it appropriately (via td::before - because tables are the devil's work), but I'm not sure how I'd approach it using variables. Have a ::before on every 1st td and then transition the variable between transparent and the new color? And something similar on the hover effect? (say a variable myLeft:0 and transition it to myLeft:100to get it to move off the table?)

Sorry this is a bit vague, but I'm trying to get it straight in my head by thinking/typing out loud! 

Appreciate any input, even if it's just a brief idea of how you'd approach it in theory

Thanks,

Nick

See the Pen PoaBWxy?editors=0111 by nwoodward (@nwoodward) on CodePen

[Rodrigo]

Hi,

 

I never, literally, never animated anything table-related, since messing up with tables, as you mentioned, is the shortest path to quit web development and become a seamstress, potato farmer or any other career available in the planet.

 

I have very little experience working with variables in GSAP (since I never was a big fan of animated pseudo classes neither), so I can't offer a lot of advice there. What you could do is attach some custom logic to the click handler in order to run the background and text colors tweens and using an onComplete callback toggle the active class (you could also use an onStart callback as well):

See the Pen rNKrGOK by GreenSock (@GreenSock) on CodePen

 

Hopefully this is enough to get you started. Let us know if you have more questions.

 

Happy Tweening!

[NickWoodward]

Hi Rodrigo

Thanks for your reply. Yeah I thought I'd tried something similar, but kept getting very odd behaviour  - I obviously messed up..!

** Edit: Going to spell this out so I understand - sorry, I edited my response so that I could try and understand - a hangover is no reason for laziness!
 

• onComplete:

          -- check if there's an activeRow, if not set it to the first row (technically this is really the previously clicked row)

          -- remove the active class

          -- clear the transparent background and black text color that was applied in the .to

          -- set that row to the active row

• .to:

          -- add the backgroundColor and color to the row that is the event target

So technically all my css hover states/properties can remain the same because I'm just animating the hover effect out on that item (which means I can take the :not(.active) rule out of my css)

I am still slightly confused though - if the active class is added in the onComplete tween *before* the backgroundColor and color animations, why does it wait to apply the selection pseudo element on the left? 🤔 I.e. it goes hover > animate out > item selected, rather than hover > item selected > animate out, like I'd expect

Anyway, thanks again for the response!

[Rodrigo]

Hi,

 

Actually I'm animating the row and not the activeRow : 

function handleClick(e) {
  const row = e.target.closest('tr');
  const rows = document.querySelectorAll('tbody tr');
  gsap.timeline({
      onComplete: () => {
        if (!activeRow) {
          activeRow = rows[0];
        }
        activeRow.classList.remove('active');
        gsap.set(activeRow, { clearProps: "all" });
        row.classList.add('active');
        activeRow = row;
      }
    })
    .to(row, { // <- Animating the row
      backgroundColor: "transparent", duration: 0.3,
      color: "black",
    });
}

The reason to keep the currentActive row in a variable is because GSAP uses inline styles which take precedence over styles in a CSS file. That's why I clear the props of the active row, in order to have the hover styles working, otherwise the background color in the inline styles (transparent) will take precedence over the red color in the CSS file. Since the only styles being applied by GSAP are the background and the font color, I just removed all the styles with clearProps. You can pass a string with comma-separated values of the properties you want to remove if there are other inline styles you might want to keep. Is important though to remove the inline styles in the onComplete callback otherwise you'll get an odd behaviour since GSAP will still be running and the clearProps will have no effect whatsoever.

 

Hopefully this makes things more clear.

 

Happy Tweening!

[NickWoodward]

Hi Rodrigo - Yeah sorry, I posted that lazily and then realised I should try and walk through it step by step!

Still not quite sure why the highlight animates out before the row is selected though. That's the one thing my brain can't seem to grasp rn, but other than that that's perfect

[Rodrigo]

3 minutes ago, NickWoodward said:

Still not quite sure why the highlight animates out before the row is selected though.

As I mentioned before the active class is being toggled in the onComplete callback of the GSAP tween. You can switch it back to the click event directly or use an onStart callback if you prefer.

 

Happy Tweening!

[NickWoodward]

On 11/29/2022 at 8:09 PM, Rodrigo said:

As I mentioned before the active class is being toggled in the onComplete callback

Ahh, that's the onComplete of the timeline object, not the first tween. My bad. Thanks for your help!

[NickWoodward]

So I'm using css variables now to change the pseudo element's color, which is looking pretty good with your animation @Rodrigo, thanks.

It would be nice to be able to animate the pseudo in/out too, but I'm guessing that's not possible without additional elements? 

 

I'm also now coming across the issue that multiple events in quick succession seem to override the previous timeline (ie the onComplete doesn't run and the active row is not changed (see: no hover effect on the previous item)). I could avoid this by debouncing the mouse clicks, but I'd have to do it for the length of the row animation, and that'll feel sluggish.

Am going to check Carl's 'breaking free of the TL' video, because that feels like it might be relevant, but if you know of an easy fix!

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