GSAP Button On Hover Interaction

An attributes-only solution to add a fancy button on-hover interaction.

How it works

step #1
Copy the GSAP Button On Hover style and <script> and paste them into the <head> of your page

<script async src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/francesco-castronuovo/gsap-button-on-hover@1.0.3/style.css" rel="stylesheet" type="text/css">
<script async src="https://cdn.jsdelivr.net/gh/francesco-castronuovo/gsap-button-on-hover@1.0.3/main.js"></script>
Copy Script
step #2
Implement in Webflow
Apply the attributes to the elements inside the page
Below is a list of elements and options to create the GSAP button on-hover interaction.
target
I want this
Section
Container
or
Div Block
to be the area where the custom corsor will be shown.
Add this attribute
Name
fc-cursor

Value
target

Description
Defines the Section, Container, or Div Block where the custom cursor will be shown. It has to be applied to an element containing the buttons the hover interaction will be applied to.
button
I want this
Button, Link Block or Text Link
to be the button the hover interaction will be applied to.
Add this attribute
Name
fc-cursor

Value
button

Description
Defines the Button, Link Block or Text Link representing the element the hover interaction will be applied to. It has to be a child of the "target".
More than one Button can be defined inside the "target".
cursor
I want this
Div Block
to be the custom cursor inside the "target".
Add this attribute
Name
fc-cursor

Value
cursor

Description
Defines the Div Block representing the custom cursor that will be shown inside the "target". It has to be a child of the "target".
follower
I want this
Div Block
to be the wrapper of the "cursor".
Add this attribute
Name
fc-cursor

Value
follower

Description
Defines the Div Block wrapping the "cursor". The follower is the element that gets animated when hovering hover the "buttons". It has to be a child of the "target".
Option
follower move duration
I want to set the time it takes for the follower to cach up with the cursor.
Add this attribute
Name
fc-cursor-follower-move-duration

Value
0.7

Description
Use this attribute to specify the time it takes for the "follower" to catch up with the current position of the "cursor".
The value is expressed in seconds.
The default value is 0.7 seconds.
Where?
This attribute should be applied to the "target" element.
Option
follower move easing
I want this easing function to be applied to the movement of the follower.
Add this attribute
Name
fc-cursor-follower-move-easing

Value
power2.out

Description
Use this attribute to specify the easing function that will be applied to the movement of the "follower". All possible values are listed in the GSAP Eases documentation.
Default value is 'power2.out'
Where?
This attribute should be applied to the "target" element.
Option
hover duration
I want to set the duration of the hover animation.
Add this attribute
Name
fc-cursor-hover-duration

Value
0.3

Description
Use this attribute to specify the duration of the animation applied to the "follower" when hovering over a "button".
The value is expressed in seconds.
The default value is 0.3 seconds.
Where?
This attribute should be applied to the "target" element.
Option
hover easing
I want this easing function to be applied to the hover animation.
Add this attribute
Name
fc-cursor-hover-easing

Value
power2.out

Description
Use this attribute to specify the easing function that will be used for the hover animation. All possible values are listed in the GSAP Eases documentation.
Default value is 'power2.out'
Where?
This attribute should be applied to the "target" element.
Option
opacity duration
I want to set the duration of the fade animations applied to the cursor or follower.
Add this attribute
Name
fc-cursor-opacity-duration

Value
0.2

Description
Use this attribute to specify the duration of the fade animations applied to the "cursor" or the "follower" when hovering over a button or moving out of or inside the "target".
The value is expressed in seconds.
The default value is 0.2 seconds.
Where?
This attribute should be applied to the "target" element.
Option
opacity easing
I want this easing function to be applied to the fade animations.
Add this attribute
Name
fc-cursor-opacity-easing

Value
power2.out

Description
Use this attribute to specify the easing function that will be used for the fade animations applied to the "cursor" or the "follower". All possible values are listed in the GSAP Eases documentation.
Default value is 'power2.out'
Where?
This attribute should be applied to the "target" element.

about projects contact

GSAP Button On Hover Interaction

How it works

Copy the GSAP Button On Hover style and <script> and paste them into the <head> of your page

Implement in Webflow

Apply the attributes to the elements inside the page