# How to make this animation when scrolling? **URL:** \ **Category:** Pinegrow Interactions Add-on\ **Created:** [July 15, 2022, 11:55am UTC](https://forum.pinegrow.com/t/how-to-make-this-animation-when-scrolling/6694 "2022-07-15T11:55:10Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![Dz163](https://avatars.discourse-cdn.com/v4/letter/d/a698b9/32.png) [@Dz163](https://forum.pinegrow.com/u/Dz163)\ **Post date:** [July 15, 2022, 11:55am UTC](https://forum.pinegrow.com/t/how-to-make-this-animation-when-scrolling/6694/1 "2022-07-15T11:55:10Z")
Hi all, help please. How to make this animation when scrolling? ![Scroll-int](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/2/2698804a599a205e5a99a2efb11f0d364fa296b0.gif) ---
**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:** [July 17, 2022, 5:19am UTC](https://forum.pinegrow.com/t/how-to-make-this-animation-when-scrolling/6694/2 "2022-07-17T05:19:04Z")
You want this on scroll right? Tricky thing here is the position. Do you want it to stay like where it is shown right now? Because it would best to do this wen that blue section reaches the top. ---
**Author:** ![Dz163](https://avatars.discourse-cdn.com/v4/letter/d/a698b9/32.png) [@Dz163](https://forum.pinegrow.com/u/Dz163)\ **Post date:** [July 17, 2022, 1:33pm UTC](https://forum.pinegrow.com/t/how-to-make-this-animation-when-scrolling/6694/3 "2022-07-17T13:33:51Z")
I wanted it to close in the middle of the screen, but how to do it and did not understand. ---
**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\ **Post date:** [July 18, 2022, 1:16pm UTC](https://forum.pinegrow.com/t/how-to-make-this-animation-when-scrolling/6694/4 "2022-07-18T13:16:37Z")
Hi @Dz163 I have no clue what your animation is, but maybe this helps with explaining how to animate on scroll: > [@Interaction fadeOutup and others not fading out on scroll](https://forum.pinegrow.com/t/interaction-fadeoutup-and-others-not-fading-out-on-scroll/6603): > > have send a mail to support with a link to a URL Hi, Don’t confuse the animation issue with the load immediately animation that is also applied to the text! I reported this a long time ago, but when I create a text animation in for example a Jarallax parallax with fade out on page scroll like the preset fadeOutup the animation works perfect in Pinegrow, but not at all in any browser. The fade out part doesn’t work! The scroll to top icon at the bottom of this test page was made 1 1/2 year ag… David ---
**Author:** ![Erres](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/erres/32/3467_2.png) [@Erres](https://forum.pinegrow.com/u/Erres)\ **Post date:** [July 18, 2022, 3:40pm UTC](https://forum.pinegrow.com/t/how-to-make-this-animation-when-scrolling/6694/5 "2022-07-18T15:40:40Z")
Would this solution with only HTML and CSS meet your needs? ![my-proposal](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/0/023c439784a1362df56b7111d2fad296a8de9c37.jpeg) René ---
**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:** [July 19, 2022, 6:27am UTC](https://forum.pinegrow.com/t/how-to-make-this-animation-when-scrolling/6694/6 "2022-07-19T06:27:32Z")
I’m not sure if I’m getting it correctly, but looking at your screen record, this should be what you are looking for. And one main issue it can be with your design is that, height of 1st and 2nd section will be pretty high, and it should cross the browser height. So it is best if both section can appear in one view, like in my example. And to know how it is done, check the scroll scene interaction settings. https://pinegrow.online/@abi/dz163-scroll-effect/ You can check it separately in your browser here [Dz163 Scroll Effect | Pinegrow Online](https://pinegrow.online/@abi/dz163-scroll-effect/index.html)