Jump to content
Search Community

Is this possible with GSAP?

kodralex test
Moderator Tag

Recommended Posts

Hi All,

 

I've seen a scroll animation on a site that works really nice. I'm wondering if anyone knows if it's possible to do something similar using GSAP?

 

I don't need to know how. More a case of, yes you could do that. It's the scroll down background movement on this site:

 

https://www.echostreetcapital.com/

 

If it's not possible with GSAP. Anyone got any ideas what technologies could achieve something like this?

 

Thanks in advanced.

Link to comment
Share on other sites

Yes it's totally possible to do everything on that site with GSAP. 

It's important to note that the hero animation is basically a series of images stitched together in a <canvas> element to simulate a video.

 

If you inspect the page you'll see this canvas element

 

<canvas width="1120" height="1002" class="ImageSequencerstyled__Canvas-sc-b2vw9p-0 cJWUKl"></canvas>

Notice it has a class containing "ImageSequencer". That's a good clue!

 

If you check the network settings you'll see a TON of images being downloaded.

 

1856684149_ScreenShot2023-01-30at9_36_09AM.thumb.png.ac4537a5a2c31664e9f933f2ed78849a.png

 

 

It would be totally possible to use ScrollTrigger to control that sequence of images being rendered. 

 

  • Like 2
Link to comment
Share on other sites

I'm just wondering if it wouldn't be more efficient to use an actual video in those cases? WebP is efficient, but as a video, it might be more efficient, and as one file easier to handle, I guess. Likely also a lot smoother in 99% of the cases as it will be better hardware accelerated. In the odd case when the animation is scrubbed back and forth, it might be a little less perfect without a lot of optimizations, but I would likely accept that trade off. 

 

Link to comment
Share on other sites

That's worth experimenting with but in my experience, you have to be very careful about how videos are encoded because they're always optimized for only playing forward and storing intermediary values that changed, thus jumping/skipping around can be very jerky (unless you encode with super-frequent keyframes, etc.) That's why sometimes just using normal images is smoother. But expertly-encoded video with the settings for uber-smooth scrubbing may work great. 

Link to comment
Share on other sites

Like Jack mentioned I've tried something similar before using the video and found I couldn't get the reverse scrubbing right, very jerky. Then again I'm not an expert when it comes to videos. I reverting back to using image sprite sequencing which worked great. 

Link to comment
Share on other sites

Yes, that is a very valid point. I guess it depends very much on your actual use case.

In my experience it is mostly us designers/developers that scrub up and down the animation, to a lesser part your customers (being critical or happy)—but the actual target audience is going one way only if at all. Hopefully dutifully impressed, they want to go on to the intended target. The backward animation being less smooth might be an ok trade-off in real-life, especially when the animation might change (Updating one video vs an image sequence…) sometime in the future.

It's a question of balance. Longer load times might cost you traffic, jerky backwards animation might be less impressive but likely users will blame it on their connection/device or device.

Call me devious… 

Link to comment
Share on other sites

  • 2 months later...

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...