Help Centre

Support > Designing and Building Your Website > Designing Your Website

How To Enable Scroll Behaviour and Animations For Blocks

Within the Style tab of Block Settings, some features can be enabled for certain blocks to alter how they display on your website. Two of these core features are Scroll Behaviour and Animation settings.

Using either of these features makes a website more visually appealing and interesting by adding depth and movement. It makes for a striking first impression, keeps visitors engaged, and helps highlight important content, making them more likely to stay on the site and explore. Additionally, it can tell a story in a captivating way, giving the website a modern feel, and making it stand out from competitors.

You can view an example of a website page featuring both types of Scroll Behaviour and Animations by visiting this link.

Parallax and animation gif


Scroll Behaviour
controls how content over an image behaves when the page is scrolled, creating a dynamic appearance. There are two settings: Fixed and Parallax. With Fixed, the background image stays in place as the content scrolls. With Parallax, the content and background image move independently.

Animation can be used to set how the content within a block loads as the page is scrolled. You can choose from a range of different directions for the animation, for example, content loading in from the right, which adds a visual flair to blocks which contain elements.

 

Accessing the Block Settings Style Tab

1. Whilst editing a page, you can access the Block Settings for any block by hovering your cursor over the block and clicking the Block Settings icon on the right-hand side.

Block Settings Icon

 

2. Click the Style tab to access the style settings for that block. If the block supports Scroll Behaviour and or Animations, the settings will be displayed in this panel.

Block Settings Modal


Scroll Behaviour

For Scroll Behaviour, the block will need to feature a background image for the setting to be present. The majority of Blocks support Background images, allowing you to upload one and enable the Scroll Behaviour setting for most blocks. You can select from None, Fixed or Parallax.

For an example of a page using both scroll options, please view and scroll this website page.

 

Scroll Behaviour

 

Animations

For Animations, the block will need to feature content such as text, headings, cards or icons for the Animation setting to be present. There are various animation effects you can apply to a block. Whichever setting you select, the current block will display the animation at the time of selection for you to view.

For an example of a page using Animations, please view and scroll this website page.

Animation settings


As with all design changes in Create, you can preview how they will look by using the Publish > Preview option in your account. The website will need to be Published to apply the features to your live website.

More Questions?

If you have any further questions, please get in touch and we will be happy to help.

Get in Touch