---
title: "Adding on-view animations to elements"
date: "2017-12-11T16:04:39+00:00"
summary: "Enhance your website's visual appeal with on-view animations. Learn how to easily add and configure eye-catching effects as users scroll, improving engagement and user experience across your site."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/adding-view-animations-elements"
id: "e7f9ac85-81ed-4f34-af39-0122b19af13f"
---

Table of contents will be added

You can animate any element into view as the user scrolls down the page. For example, you can add an on-view animation to a Container element which tells it to fade in as it enters the user's browser view port. 

Adding on-view animations
-------------------------

The on-view animations are available on all elements which can render a block element. To access the on-view animations:

1.  Navigate to a page or template with the Layout canvas
2.  As an example, add a Paragraph element to the Layout canvas
3.  Double click on it to edit its settings
4.  Click on the ...ellipsis tab and select **Animate on view**

![87885af9-enable-animate-on-view.png](https://acquia.widen.net/content/a4de6813-b48c-4b3d-b6f4-f8b4c3d40829/web/87885af9-enable-animate-on-view.png)

Configuring on-view animations
------------------------------

The Animate on view includes the following settings:

*   **Group** - Select the type of animation. These have be added to logical groups
*   **Animation** - Select the animation
*   **Duration** - Set how long in milliseconds the animation will take to run
*   **Delay** - Set a start delay on the animation in milliseconds
*   **Offset** - Set the animation to start at a specific offset before or after the element has entered the view port
*   **Iteration** - Set the number of times the animation should run

![35528271-configure-animate-on-view.png](https://acquia.widen.net/content/62363837-6dbf-4530-8b99-e9e6f77fe5d0/web/35528271-configure-animate-on-view.png)

Important

Some on-view animations will animate elements from the left or right of the browser Viewport. When you use these animations, you need to add the CSS style overflow: hidden to a parent container or you will see horizontal scrollbars appear. For more information about styles, see [Using the style builder](/drupal-starter-kits/add-ons/site-studio/using-style-builder "Using the style builder").

Enable or disable animate on-view on touch devices
--------------------------------------------------

You can configure the on-view animations to apply or not apply on touch devices. Animation on view can cause usability problems on touch devices so this option is set to Disabled by default. This setting is within Configuration because it is a global setting.

To change the Animation settings:

1.  Navigate to Site Studio > Configuration > **Animation settings**
2.  Select **Enabled** or **Disabled**
3.  Click **Save.**

![ee16b753-enable-on-view-animation-touch-devices.png](https://acquia.widen.net/content/476b6c70-0c7e-4962-b49f-38a928c560d8/web/ee16b753-enable-on-view-animation-touch-devices.png)