Thrive Architect comes with multiple features that can you can use to animate various elements from your website.

In this article, we will have a look at how you can recreate a scroll effect similar to the one showcased on the Ommi Demo Site:

This scrolling effect can be easily achieved with the help of the "Parallax" feature added to an image.

Furthermore, for this example, we will also be using a "Block" element to start building our animation on an already existing design:

Add the image

First of all, open the right sidebar list of elements, and look for the "Image" element:

Drag and drop it on your block:

Note You can use here an image with a transparent background, such as a PNG. This way, if your image overlaps with elements from your website, it will not cover entirely the already existing content:

Configure the Parallax feature

With your image selected, open the "Scroll Behavior" section of your left sidebar:

Here, select the "Parallax" option:

In the new set of options that appears, select on which devices you would like to make this scroll effect visible and then click on "Add New Effect":

This will open a pop-up with various effects you can use:

For the example used in this article, we have used the "Horizontal Scroll" effect:

Feel free to use the other options available here, to make sure the effect works well with the elements from your page. Once done, click on "Apply":

Whilst you are still on this section of the left sidebar, you can activate the "Parallax Preview" toggle:

This will allow you to view how the effect looks on your page directly from the editor:

Add an animation

Next, from the same left sidebar list of options, open the "Animation & Action" section:

And here, add a new "CSS Animation":

This will open a pop-up with various animations you can choose from. The animation for this example is "Fade in", but feel free to check out the other animation as well:

Once done, click on "Apply" and save your changes:

The scroll effect should be similar to this one:

There are multiple ways in which you can combine the options available in the "Scroll Behavior" and "Animation & Action" sections. Feel free to test and see what works best for your website.

Furthermore, if you want to read more about how you can make your website look more like a demo one, you might want to check out this article from our knowledge base.

Hopefully, this article about how to recreate the animated scroll effect from the Ommi Demo Site was useful to you. If so, make sure to rate this article with a smile below :)

Did this answer your question?