Hit state hover calculations

[ochalmers]

Hi guys,

 

I'm trying to recreate a very crude version of the functionality on this site - https://emmitfenn.com/ .

 

As you can see my codepen is working as intended at the moment, but my problem is when I try add another element into the main div (the class for these is UIMenuSlice), the calculations that I have applied don't seem to be adding up correctly. I was hoping some of the wizards in here would be able to shed a light as to how I slightly rejig the calculations I have to allow me to adapt this into a flexible build. There are only 4 elements at the moment but i'd like to be able to change this as possible.

 

Thanks all.

 

See the Pen LLrYvz by olichalmers (@olichalmers) on CodePen

[ochalmers]

Haven't posted here in so long that i've just realised my Shockingly Green subscription is up. Renewal time!

[mikel]

Hi,

 

The EMMIT web is really fancy - a lot of cool animations.
And excellent layout and graphic style!

 

It triggerd me to try a cover of the intro.

Just as a start:

 

See the Pen jwKPex by mikeK (@mikeK) on CodePen

 

 

What could be next:

• I hoped to handle different directions for animating the width in line 35ff - but a 'trick' with cicle doesn´t work.  
• I´ll think about to control width and color of the color segments by a staggerTo and cycle(?).

 

Any lead would be great ...

 

Best regards
Mikel

 

[ochalmers]

This looks cool Mikel!

Yea the problem i'm having is the alignments of the wrappers. In the original they are incrementally shifted to a negative amount so that the first is clipped to the left and the end is clipped to the right. That calculation is really throwing me off (my demo works with the 4 but when I try with anymore or adjust the size of the wrapper it breaks). Any help here would be amazing!

[mikel]

Hi,

 

... a small step forward:  

 

See the Pen wexNQo by mikeK (@mikeK) on CodePen

 

I´m now struggling to handle the animation of colorSegments inside my special mouseenter function.

 

But today it´s to stressful

• to much TRUMP & Co.
• to much heli´s, police sirens ...

I´m living close to the hall where the G20 is meeting.

 

Regards from Hamburg

Mikel