SPEED UP ANIMATION DEBUG TIME Keyboard shortcut to move inherited selectors and combo classes

It's nice that we can do this...

  • CMD+K (quick add)

  • type some stuff + ENTER (to add the element)

  • CMD+ENTER (name the class)

It is nice, but it is limited. The limitations really show when you are Combo Classing your way to website build nirvana.

Combo classes are really the best way to set up for triggers and animations, but the laborious task of having to navigate through each (for example) Container with a combo class...

  • Z (to open naviation panel)

  • up/down/left/right arrows (to navigate to the correct element)

  • CMD+ENTER (to get cursor into the class manager)

  • stuck...

The only things you can do here (from the keyboard)...

  1. Rename the existing class

  2. Create a combo class

  3. Delete the existing class

  4. ...we need another thing!

When debugging a site's triggers and animations before publication, there's a lot of information I need to reference in order to figure out what is breaking which animation. The only way to get that information (currently) is by clicking into the text "Inheriting 3 selectors" and clicking the level of inheritance I want to reference or change the property...

Lots of clicking. Lots of moving between different elements. Lots of moving between keyboard and mouse. One step closer to webflow nirvana looks like...

  1. Rename the existing class -> CMD+SHIFT+Enter

  2. Delete the existing class -> DELETE

  3. Create a combo class -> CMD+Enter

  4. Open inheritance dropdown

Once the inheritance dropdown is open, up/down arrows to select, ENTER to choose.

If this was possible, it would probably save me a full hour of moving from keyboard to mouse in a day.


  • Charles Ether
  • Jun 6 2022