GSAP Trail Image Effect

An attributes-only solution to build a trail of images from a CMS collection or a group of static images

How it works

step #1
Copy the GSAP Trail Image 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-trail-image-effect@1.0.2/style.css" rel="stylesheet" type="text/css">
<script async src="https://cdn.jsdelivr.net/gh/francesco-castronuovo/gsap-trail-image-effect@1.0.2/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 trail image effect.
component
I want this
Section
Container
or
Div Block
to host the trail of images.
Add this attribute
Name
fc-trail-image

Value
component

Description
Defines the Section, Container, or Div Block that will host the trail of images. It has to be applied to an element containing the images that will be used to build the trail.
list
I want this
Div Block
to be the wrapper of the images that will be used to generate the trail.
Add this attribute
Name
fc-trail-image

Value
list

Description
Defines the data source for the trail of images. It has to be applied to a Div Block wrapping the images that will be used to build the trail.
For example, this attribute could be applied to a Collection List Wrapper that is a child of the "component". Or to a simple Div Block wrapping a group of static images.
Option
mouse threshold
I want to set the mouse movement threshold for the trail of images.
Add this attribute
Name
fc-trail-image-threshold

Value
100

Description
Use this attribute to specify the required distance the mouse has to travel before the next image in the trail is shown.
The value is expressed in pixels.
The default value is 100 pixels.
Where?
This attribute should be applied to the "component" element.
Option
opacity from
I want to set the value the image opacity will be animated from.
Add this attribute
Name
fc-trail-image-opacity-from

Value
0.6

Description
Use this attribute to specify an initial value for the opacity of each image in the trail when the image starts being animated.
The default value is 0.6.
Where?
This attribute should be applied to the "component" element.
Option
opacity to
I want to set the value the image opacity will be animated to.
Add this attribute
Name
fc-trail-image-opacity-to

Value
1

Description
Use this attribute to specify a final value for the opacity of each image in the trail when the image stops being animated, and before it starts fading out.
The default value is 1.
Where?
This attribute should be applied to the "component" element.
Option
scale from
I want to set the value the image scale will be animated from.
Add this attribute
Name
fc-trail-image-scale-from

Value
0.8

Description
Use this attribute to specify an initial value for the scale of each image in the trail when the image starts being animated.
The default value is 0.8.
Where?
This attribute should be applied to the "component" element.
Option
scale to
I want to set the value the image scale will be animated to.
Add this attribute
Name
fc-trail-image-scale-to

Value
1

Description
Use this attribute to specify a final value for the scale of each image in the trail when the image stops being animated, and before it starts fading out.
The default value is 1.
Where?
This attribute should be applied to the "component" element.
Option
main duration
I want to set the duration of the main (non fade-out) part of the animation.
Add this attribute
Name
fc-trail-image-main-duration

Value
0.7

Description
Use this attribute to specify the duration of the main (non fade-out) part of the animation.
The value is expressed in seconds.
The default value is 0.7s.
Where?
This attribute should be applied to the "component" element.
Option
fade-out duration
I want to set the duration of the fade-out part of the animation.
Add this attribute
Name
fc-trail-image-fade-out-duration

Value
1

Description
Use this attribute to specify the duration of the fade-out part of the animation.
The value is expressed in seconds.
The default value is 1s.
Where?
This attribute should be applied to the "component" element.
Option
fade-out delay
I want to set the delay before the fade-out part of the animation.
Add this attribute
Name
fc-trail-image-fade-out-delay

Value
0.3

Description
Use this attribute to specify the amount of time to wait after the main part of the animation, before the fade-out part of the animation is executed.
The value is expressed in seconds.
The default value is 0.3s.
Where?
This attribute should be applied to the "component" element.
Option
main ease
I want this easing function to be applied to the main part of the animation.
Add this attribute
Name
fc-trail-image-main-ease

Value
power3

Description
Use this attribute to specify the easing function that will be used for the main part of the animation. All possible values are listed in the GSAP Eases documentation.
Default value is 'power3'
Where?
This attribute should be applied to the "component" element.
Option
fade-out ease
I want this easing function to be applied to the fade-out part of the animation.
Add this attribute
Name
fc-trail-image-fade-out-ease

Value
power3

Description
Use this attribute to specify the easing function that will be used for the fade-out part of the animation. All possible values are listed in the GSAP Eases documentation.
Default value is 'power3'
Where?
This attribute should be applied to the "component" element.
Option
reset index
I want the index of the trail of images to be resetted when moving the cursor out of the "component" or when the cursor stops moving.
Add this attribute
Name
fc-trail-image-reset-index

Value
false

Description
Use this attribute to specify if the index of the trail of images has to be resetted (i.e. if the trail of images next time will start from the very first image in the trail) each time the mouse is moved out of the "component" or the amount of frames specified in the reset index delay option has been rendered after the mouse stopped moving.
Default value is 'false'
Where?
This attribute should be applied to the "component" element.
Option
reset index delay
I want this to be the number of frames to render before the index of the trail of images is resetted.
Add this attribute
Name
fc-trail-image-reset-index-delay

Value
200

Description
Use this attribute to specify the number of frames to render before the index of the trail of images is resetted (i.e. if the trail of images next time will start from the very first image in trail) after the mouse stopped moving.
Default value is 200.
Where?
This attribute should be applied to the "component" element.

夏を生きる

ずっとずっとずっと

アーユーレディー

ブレス

溢れた水の行方

幸せ -EP-【初回生産限定盤】

SINGALONG

Actor

sabotage【初回生産限定盤】

Shout Baby

LITMUS

ミチヲユケ

緑黄色社会

Ryokuoushoku Shakai is a pop rock band from Aichi, formed in 2012. They performed their first live on July 4, 2012.

サクラ

サクラ（桜、櫻、英：Cherry blossom、Japanese cherry、Sakura）は、バラ科サクラ亜科サクラ属（スモモ属とすることもある。「野生種の分類」の項を参照）の落葉広葉樹の総称。またはその花である。一般的に春に桜色と表現される白色や淡紅色から濃紅色の花を咲かせる。