top of page
300 px
1 - Scroll Trigger
Indicates when scrolling effect should start. Start point is the bottom edge of the content.
In this example the scroll trigger is 300 px
So the scrolling animation starts when you scroll screen
300px above the content edge.
Unit can be set in px, vw or vh
Scroll Trigger
Content edge
Used parameters:
Scroll Trigger:
Value: 300 Unit: px
Speed:
Horizontal: 1 Vertical: 0
Distance:
Horizontal: Value: -300 Unit: px
Vertical: Value: 0 Unit: px
Flow: 0
Opacity:
Start: 1 End:1
Zoom:
End: 1
Flow Effects: Linear
2 - Speed
Indicates how fast the scrolling element will move and reach destination point.
speed value of 1 equivalent to speed user scrolls the page 1:1
lower values would move element slower than user's scroll
higher values would move element faster than user's scroll accordingly
Scroll Trigger
Content edge
In this example we have 2 scrolling elements:
For left element the speed was set to 1
For right element the speed was set to 2
So left element will be moving with the speed as user scrolls the page
Right element will be moving 2x faster
There are vertical and horizontal speed options.
In this case we use vertical speed as we set vertical scrolling for the element
hint! You can also use decimals for the values like 0.4 or 1.45
Used parameters:
Scroll Trigger:
Value: 300 Unit: px
Speed:
Horizontal: 0 Vertical: 1
Distance:
Horizontal: Value: 0 Unit: px
Vertical: Value: 300 Unit: px
Flow: 0
Opacity:
Start: 1 End:1
Zoom:
End: 1
Flow Effects: Linear
Used parameters:
Scroll Trigger:
Value: 300 Unit: px
Speed:
Horizontal: 0 Vertical: 2
Distance:
Horizontal: Value: 0 Unit: px
Vertical: Value: 300 Unit: px
Flow: 0
Opacity:
Start: 1 End:1
Zoom:
End: 1
Flow Effects: Linear
3 - Distance
Indicates how far the scrolling element will move.
Accepts positive and negative values.
Horizontal negative value will move element left from it inherit location, positive - to the right;
Vertical negative value will move element top from it inherit location, positive - to the bottom;
Scroll Trigger
Content edge
In this example we have 4 scrolling elements:
- For left element the distance was set to horizontal 150px
- For middle-left element the distance was set to horizontal -150px
- For middle-right element the distance was set to vertical 150px
- For right element the distance was set to vertical -150px
In this case we marked the expected path with orange boxes.
hint! You can combine vertical and horizontal directions to have diagonal effects.
Don't forget to add speed parameter when you set the direction.
Used parameters:
Scroll Trigger:
Value: 300 Unit: px
Speed:
Horizontal: 0 Vertical: 1
Distance:
Horizontal: Value: 0 Unit: px
Vertical: Value: 150 Unit: px
Flow: 0
Opacity:
Start: 1 End:1
Zoom:
End: 1
Flow Effects: Linear
150 px
Used parameters:
Scroll Trigger:
Value: 300 Unit: px
Speed:
Horizontal: 0 Vertical: 1
Distance:
Horizontal: Value: 0 Unit: px
Vertical: Value: -150 Unit: px
Flow: 0
Opacity:
Start: 1 End:1
Zoom:
End: 1
Flow Effects: Linear
-150 px
Used parameters:
Scroll Trigger:
Value: 300 Unit: px
Speed:
Horizontal: 1 Vertical: 0
Distance:
Horizontal: Value: -150 Unit: px
Vertical: Value: 0 Unit: px
Flow: 0
Opacity:
Start: 1 End:1
Zoom:
End: 1
Flow Effects: Linear
150 px
Used parameters:
Scroll Trigger:
Value: 300 Unit: px
Speed:
Horizontal: 1 Vertical: 0
Distance:
Horizontal: Value: 150 Unit: px
Vertical: Value: 0 Unit: px
Flow: 0
Opacity:
Start: 1 End:1
Zoom:
End: 1
Flow Effects: Linear
-150 px
1x
2x
4 - Flow
Indicates how smooth the scrolling element will move.
(Zero)0 value indicates that no flow effect were added.
Value > 0(Zero) adds flow effect to the scroll.
Scroll Trigger
Content edge 1
In this example we have 2 scrolling elements:
- For top element element the flow was set to 0
- For bottom element the flow was set to 0.3
In order to make 2 horizontal elements start moving at the same time we changed scroll trigger for the 2nd element to scroll trigger of 1st element (300px) + distance from top of 1st element and top of 2nd in this case (150px). Total 450px;
hint! It's always nice to try using flow together with flow effects
in order to get intriguing results.
Content edge 2
300 px
450 px
Scroll Trigger:
Value: 300 Unit: px
Speed:
Horizontal: 1.5 Vertical: 0
Distance:
Horizontal: Value: 450 Unit: px
Vertical: Value: 0 Unit: px
Used parameters:
Flow: 0
Opacity:
Start: 1 End:1
Zoom:
End: 1
Flow Effects: Linear
Scroll Trigger:
Value: 300 Unit: px
Speed:
Horizontal: 1.5 Vertical: 0
Distance:
Horizontal: Value: 450 Unit: px
Vertical: Value: 0 Unit: px
Used parameters:
Flow: 0.3
Opacity:
Start: 1 End:1
Zoom:
End: 1
Flow Effects: Linear
6 - Zoom
Indicates how big/small the scrolling element becomes during the move.
1 value is default value and means no changes. Like 1:1.
Lower values will make element smaller
Higher values bigger accordingly
Scroll Trigger
Content edge 1
Content edge 2
In this example we have 2 scrolling elements:
- For top element the end zoom was set to 0.75
- For bottom element the end zoom was set to 1.5
In order to make 2 horizontal elements start moving at the same time we changed scroll trigger for the 2nd element to scroll trigger of 1st element (300px) + distance from top of 1st element and top of 2nd in this case (150px). Total 450px;
hint! we don't need start zoom value as initial size of the element can be easy adjusted in Editor.
300 px
450 px
Scroll Trigger:
Value: 300 Unit: px
Speed:
Horizontal: 1.5 Vertical: 0
Distance:
Horizontal: Value: 450 Unit: px
Vertical: Value: 0 Unit: px
Used parameters:
Flow: 0.1
Opacity:
Start: 1 End: 1
Zoom:
End: 0.75
Flow Effects: Linear
Scroll Trigger:
Value: 300 Unit: px
Speed:
Horizontal: 1.5 Vertical: 0
Distance:
Horizontal: Value: 450 Unit: px
Vertical: Value: 0 Unit: px
Used parameters:
Flow: 0.1
Opacity:
Start: 1 End: 1
Zoom:
End: 1.5
Flow Effects: Linear
half distance
7 - Rotate
Indicates how many times the scrolling element should be rotated during the move.
0 value is default value and means no rotates.
Positive values will rotate element clockwise
Negative values will rotate element counter clockwise
Numbers values means number of turns to be done. Value 1 means 1 turn clockwise.
Scroll Trigger
In this example we have 2 scrolling elements:
- For left element the rotate value was set to 2
(clockwise)
- For right element the rotate value was set to -2
(counter clockwise)
hint! you can use decimals like 0.5 in your values to adjust the rotation degree
Content edge
Used parameters:
Scroll Trigger:
Value: 400 Unit: px
Speed:
Horizontal: 2 Vertical: 0
Distance:
Horizontal: Value: 800 Unit: px
Vertical: Value: 0 Unit: px
Flow: 0.1
Opacity:
Start: 1 End: 1
Zoom:
End: 1
Rotate: 2
Flow Effects: Linear
Used parameters:
Scroll Trigger:
Value: 400 Unit: px
Speed:
Horizontal: 2 Vertical: 0
Distance:
Horizontal: Value: -800 Unit: px
Vertical: Value: 0 Unit: px
Flow: 0.1
Opacity:
Start: 1 End: 1
Zoom:
End: 1
Rotate: -2
Flow Effects: Linear
8 - Flow Effects
Indicates how linear the scrolling element will move.
linear - Indicates that the interpolation goes linearly.
ease - Indicates that the interpolation starts slowly, accelerates sharply, and then slows gradually towards the end.
ease-in - Indicates that the interpolation starts slowly, then progressively speeds up until the end, at which point it stops abruptly.
ease-out - Indicates that the interpolation starts abruptly and then progressively slows down towards the end.
ease-in-out - Indicates that the interpolation starts slowly, speeds up, and then slows down towards the end.
stepped - Indicates that the interpolation stays in its initial state until the end, at which point it jumps directly to its final state.
cubic-bezier - is a type of animation easing function used in web development to control the rate of change of an animation over time. It is defined by four control points (P0, P1, P2, P3) and produces smooth and customizable animations with different levels of acceleration and deceleration throughout the animation duration.
You can create own values for animation of cubic-bezier here: cubic-bezier.com
5 - Opacity
Indicates how transparent the scrolling element becomes during the move.
1 value is default value and means no changes. 0 value makes element fully transparent.
start value indicates initial transparency end value indicates transparency at end.
lower values will make element smaller higher values take no effect
Scroll Trigger
Content edge 1
Content edge 2
In this example we have 2 scrolling elements:
- For top element start opacity was set to 0, end opacity was set to 1
- For bottom element start opacity was set to 1, end opacity was set to 0
In order to make 2 horizontal elements start moving at the same time we changed scroll trigger for the 2nd element to scroll trigger of 1st element (300px) + distance from top of 1st element and top of 2nd in this case (150px). Total 450px;
300 px
450 px
Scroll Trigger:
Value: 300 Unit: px
Speed:
Horizontal: 1.5 Vertical: 0
Distance:
Horizontal: Value: 450 Unit: px
Vertical: Value: 0 Unit: px
Used parameters:
Flow: 0.1
Opacity:
Start: 0 End: 1
Zoom:
End: 1
Flow Effects: Linear
Scroll Trigger:
Value: 300 Unit: px
Speed:
Horizontal: 1.5 Vertical: 0
Distance:
Horizontal: Value: 450 Unit: px
Vertical: Value: 0 Unit: px
Used parameters:
Flow: 0.1
Opacity:
Start: 1 End: 0
Zoom:
End: 1
Flow Effects: Linear
Scroll Trigger
Content edge
In this example we have 7 scrolling elements representing each of the Flow Effects.
hint! use the flow effects together with flow value to see interesting results. In this case flow 0.5 was used for each of the scrolling elements.
Used parameters:
Flow Effects:
linear
ease
ease-in
ease-out
ease-in-out
stepped
cubic-benzier
(.3,.53,.44,-1.11)
Scroll Trigger:
Value: 300 Unit: px
Speed:
Horizontal: 0 Vertical: 1
Distance:
Horizontal: Value: 0 Unit: px
Vertical: Value: 300 Unit: px
Flow: 0.5
Opacity:
Start: 1 End: 1
Zoom:
End: 1
Rotate: 0
more parameters to come...
maybe ;)
bottom of page