Parthiban

@OSUblake Thank you for that alternative suggestion with a demo. I did try this and it works well in terms of scroll interactivity, but it has some issues with the video buffering. I have implemented this with another video on a test link here - http://foe.design/testing/experiments/video-demo.html. If you open this page and wait for the video to load and then start scrolling, you will see that the video stops in between and buffers. It is not giving a fully loaded smooth experience, without buffering. I have used exactly the same code from your demo with just some html for showing the 'loading'. Could you please check and suggest if you have any further thoughts on this? Thank you so much.

Thanks for your reply. As I understand by using a video, it doesn't make use of requestAnimationFrame and thereby not delivering a smooth experience as we have it in this approach by using image sequences on canvas with requestAnimationFrame. Your thougths on this?

Hello @OSUblake. Good day. I have now developed my code with the help of this article. I have customized some things for my requiremets. Here is a link to the pen https://codepen.io/parthiban-repo/pen/xxgeYBV The images won't load in this link because I have not linked them due to confidentiality concerns with my client. But I hope you will be able to figure out the code. The animation seems to be working fine to me. All that I'm concerned is about the load performance; it is now taking close to 20 seconds to load these 100 images (already optimized in WebP format). All images put together, the total files size is 9.5MB. Each file size is about 30kb to 140kb depending on the image. Further to this I will have more sections in the website with more visuals (minor animations and a lot of product pictures) making the site further heavy. Firstly, I want your opinion and advice on the code I have developed so far - if it is in the right direction and is good enough. Secondly, I would like to hear from you on how we can improve the load performance. Please advice. Thank you.

@OSUblake Thank you for your feedback. I shall get back to you soon with a working code that I'm building with all the help I'm gathering from this thread. With a working pen, I guess, it's easier for us to discuss details further. Thank you.

First of all, thank you very much for this wonderful animation library. And than you very much for this discussion. It has helped me understand a lot about creating such interactive animations. In fact, inspired from this website here - https://www.clearmotion.com/technology, I proposed an interactive website idea for a client's product; and now, the project is through and I'm already working on the website. I stumbled up on this article and since then, it has helped me a lot in my project. Enough of my background:-) Coming to the point, in my product landing page, I am animating the product using image sequences (individual files in WebP format) on <canvas> using ScrollTrigger as suggested by @ZachSaucier (Thank you for that). Each of my image files is 1920 x 1080 in dimension, about 90kb-200kb each file size (after optimizing for decent visual appeal), and I have about 100 frames in this animation; essentially, there are 100 http requests for loading this experience. I was wondering if it is a good idea to make image sprites and load a single image file; if I do this, since my image dimension is 1920 x 1080, the sprites image file will be pretty huge in terms of dimension and file size. Any suggestions on what is the best approach for this scenario? If going with image sprites approach, how can we go about generating the image sprites and implementing the animation, similar to the Apple Airpod landing page that we discussed in this thread? I also understand that there are a number of factors contributing to the performance of the experience such as delivery of the assets (using CDN), optimizing the image files and other assets etc; but a clear understanding on a holistic way of delivering a seamless experience would really help in creating a fabulous work. Any thougths and suggestions would really help, and are highly appreciated. Thank you very much once again.