# Triggering animation when it comes into view

**URL:** <https://forum.pinegrow.com/t/triggering-animation-when-it-comes-into-view/4568>\
**Category:** General\
**Created:** [October 1, 2020, 9:33am UTC](https://forum.pinegrow.com/t/triggering-animation-when-it-comes-into-view/4568 "2020-10-01T09:33:34Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![excede](https://avatars.discourse-cdn.com/v4/letter/e/8baadc/32.png) [@excede](https://forum.pinegrow.com/u/excede)\
**Post date:** [October 1, 2020, 9:33am UTC](https://forum.pinegrow.com/t/triggering-animation-when-it-comes-into-view/4568/1 "2020-10-01T09:33:34Z")

</div>

I’m wondering how to add animation as something comes into view?  
Scroll seems to animate on the scrolling action but I want the whole animation to play as soon as it comes into view in a timed way (not based on the speed someone is scrolling).

Thanks!

---

<div class="post-metadata">

**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\
**Post date:** [October 1, 2020, 4:16pm UTC](https://forum.pinegrow.com/t/triggering-animation-when-it-comes-into-view/4568/2 "2020-10-01T16:16:48Z")

</div>

There is an option you should enable.

- Go to Interaction setting below the **Scroll scene**
- Click on **Advanced options** , more options will appear below
- For **Play** select **Independently**

Now the animation will not be based on the scroll.

Check the image below if it helps.

 ![Screen Shot 2020-10-01 at 9.55.59 PM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/6/65aedf9ac9e91d3c24eb9d0d0d64572f658c6f06.png)

---

<div class="post-metadata">

**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\
**Post date:** [October 1, 2020, 4:20pm UTC](https://forum.pinegrow.com/t/triggering-animation-when-it-comes-into-view/4568/3 "2020-10-01T16:20:31Z")

</div>

You can also check the Pinegrow Interactions tutorial below, which implements similar interactions that you are looking for

> **[Adding web interactions to Booklers landing page | Pinegrow Web Editor](https://pinegrow.com/tutorials/adding-web-interactions-to-booklers-landing-page/)**
>
> A step by step tutorial on adding web interactions and animations to a simple landing page.

You should also check other tutorials which can help a lot

> **[Tutorials | Pinegrow Web Editor](https://pinegrow.com/docs/interactions/tutorials/)**
>
> Learn about creating rich web interactions with our step-by-step tutorials.