How to use Scroll Effects
Scroll Effects allows you to animate elements on a section as you scroll up and down the webpage.
There are six animations you can add to a block using SquareKicker.
- Vertical - Movements up and down
- Horizontal - Movements left and right
- Opacity - Fade effect
- Scale - Increasing or decreasing size
- Rotate - Spin left or right
- Blur - Distort element
Step by step
- Select the Squarespace Block you want to add Scroll Effects to.
- Click the SquareKicker Icon.
- Select the Advanced tab.
- Click Scroll Effects.
With Scroll Effects you have the ability to target both the Entry Effect and the Exit Effect.
To add an Entry Effect and / or Exit Effect,
- Select the effect you want to activate.
- Click the 'enable' toggle.
- Change the Parameters to achieve the desired effect.
The Entry Effect will be how the block is animated as it moves from the start of the screen until it reaches the centre of the screen. The Exit Effect is how it will exit from the centre of the screen to the end of the screen.
TIP: You can combine multiple animations to an element to take your Scroll Effects to the next level.