Nikhil17

It is now 90% correct what I am trying to achieve. But the main problem is still as it is. Below the HTML code, we have used a div "spacer" which is having a "height:100vh" which means the animation is working based on the "spacer" and not moving in the same location. If we add some more content below and above the animation then the animation looks weird and look the content overlap with the animation.

Yeah. Rodrigo provided me with the major solution but even I have reached that point. I don't want any rotation in the animation, I just want a sequence of images to animate on a scroll. I want the animated part (Canvas/ image) should cover 50% of the viewable screen and also display the below/ next content at the same time. In Rodrigo's demo example: The animated size is 50% which is good but the below/ next content (orange background) is not visible during the scroll. The orange content appears when the scrolls are complete. I want to have the animated part should scroll when it is in the viewport and also the below content should be visible at the same time. (Example link: https://www.behr.com/consumer/inspiration/2023-coty/) Please go through the above link which shows the exact demo I want to have in the middle of my webpage. Can you please provide any suggestions or demos or something which I need to focus on?

I basically want to have a sequence of images that works as an animation on scroll when it is in the viewable part of the screen. I want the canvas should cover only half of the screen and the other half should have other sections of the data (Ex: https://www.behr.com/consumer/inspiration/2023-coty/). (Note: I want canvas should cover 70%(animated) of the screen and the remaining 30% (not animated section) should have other sections/ content and data. The animation should not cover the whole page.) I hope you understood the question. If not then I want to have animation just like this page have at the top https://www.behr.com/consumer/inspiration/2023-coty/

Hi, I am not looking into the exact solution but the gsap has plenty of features that make me confused about its usage. I have already created the above solution and I am stuck at the canvas/ image height which looks weird on scroll. I want something like this https://www.behr.com/consumer/inspiration/2023-coty/ (The animation that is at the top). The same functionality I am looking for in the middle of my webpage. You can see below codepen code what I have done so far. I am looking for some help/the right direction to look on as I am having this issue since last month. Thanks in advance. https://codepen.io/Nikhil1795/pen/MWPQdrK

I have used one of your codepen example to create image animation on scroll in my webpage. The example works ok but I want few modifications in that with image animation. 1. When I add more content with your codepen code for animation, the animation gets scrolled with window scroll (looks weird while scrolling). 2. When a user scrolls the page and when Canvas/ image animation comes at the visible part of the screen, the screen should locked and only the sequence of images should be animated on scroll. 3. The last and important requirement is that the canvas/ image height should be 300px (It should not cover the whole window) index2.html