Distortion Draggable Slider

An attributes-only solution to build a distortion draggable slider that also works with Webflow CMS

How it works

step #1
Copy the Distortion Draggable Slider <script> and paste it into the <head> of your page
‍
<script async src="https://cdn.jsdelivr.net/gh/francesco-castronuovo/distortion-draggable-slider@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 canvas cursor tracking effect.
component
I want this
Div Block
to be slider component.
Add this attribute
Name
fc-distortion-slider

Value
component

Description
Defines the Div Block that will host the slider.
slider
I want this
Div Block
to be slider.
Add this attribute
Name
fc-distortion-slider

Value
slider

Description
Defines the Div Block that will represent the slider. It has to be a child of the "component".
For example, this attribute could be applied to a Collection List Wrapper.
mask
I want this
Div Block
to be slider mask.
Add this attribute
Name
fc-distortion-slider

Value
mask

Description
Defines the Div Block that will represent the slider mask - the direct wrapper of all the slides. It has to be a child of the "slider".
For example, this attribute could be applied to a Collection List.
slide
I want this
Div Block
to be a slide.
Add this attribute
Name
fc-distortion-slider

Value
slide

Description
Defines the Div Block that will represent a single slide inside the slider mask. It has to be applied to all the Div Blocks inside the "mask" - each Div Block will represent a single slide.
For example, this attribute could be applied to a Collection List Item.
progress bar
I want this
Div Block
to be the progress bar. (optional)
Add this attribute
Name
fc-distortion-slider

Value
progress-bar

Description
Defines the Div Block that will represent the progress bar of the slider. It has to be a child of the "component", and it should be wrapped by another Div Block that will define its maximum width.
Option
speed
I want the slider to have this speed.
Add this attribute
Name
fc-distortion-slider-speed

Value
5

Description
Use this attribute to set the speed of the slider while dragging.
Default value is 5.
Where?
This attribute should be applied to the "component" element.
Option
strength
I want the slider distortion to have this strength.
Add this attribute
Name
fc-distortion-slider-strength

Value
0.05

Description
Use this attribute to specify the strength of the overall distortion effect while dragging. Suggested values are in the interval from 0.05 to 0.15.
Default value is 0.05.
Where?
This attribute should be applied to the "component" element.
Option
SCALE
I want this to be the scale factor to be applied on the images.
Add this attribute
Name
fc-distortion-slider-scale

Value
0.003

Description
Use this attribute to specify the scale factor that will be applied to the slides while dragging. Suggested values are in the interval from 0.003 to 0.01.
Default value is 0.003.
Where?
This attribute should be applied to the "component" element.
Option
distortion
I want this to be the distortion factor to be applied on the images.
Add this attribute
Name
fc-distortion-slider-distortion

Value
0.006

Description
Use this attribute to specify the horizontal distortion factor that will be applied to the images while dragging. Suggested values are in the interval from 0.001 and 0.04.
Default value is 0.006.
Where?
This attribute should be applied to the "component" element.

Distortion Draggable Slider

How it works

Copy the Distortion Draggable Slider <script> and paste it into the <head> of your page

Implement in Webflow

Apply the attributes to the elements inside the page