Jump to content
Search Community

Scrolltrigger Image Sequence Performance

hm-tam test
Moderator Tag

Go to solution Solved by hm-tam,

Recommended Posts

I have several scrolltrigger image sequences on a page that I'm trying to optimize for faster load times, I've provided a link to one of them in a codepen. It's been a while, but I used one of the codes listed somewhere in these forums, so kudos to the person who made it. However, I am running into an issue with load time, it seems to load all the images at once therefore increasing the amount of requests. I'm just trying to see if anyone here might know how to make this code a little more performant like only show/hide the images when scrubbing through.

I would appreciate any of your help.

 

Thanks

 

 

Screen Shot 2022-03-01 at 11.25.20 AM.png

See the Pen yLPQomV by tampham (@tampham) on CodePen

Link to comment
Share on other sites

Welcome to the forums @hm-tam

 

Loading on demand wouldn't work well because of course it takes time to load, so you'd have a bunch of blank frames, at least initially.

 

The images aren't loaded as part of the initial page load, so I don't see why it would be much of an issue. Apple uses this effect all over their site. Check out the Network tab here.

 

https://www.apple.com/airpods-pro/

 

If you want a smaller size, you can try scrubbing a video instead.

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...