Jump to content


Hit state hover calculations

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites



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


  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites



... 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





  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.