Share Posted January 30 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 More sharing options...
Share Posted January 30 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. It would be totally possible to use ScrollTrigger to control that sequence of images being rendered. 2 Link to comment Share on other sites More sharing options...
Author Share Posted January 30 Thanks Carl. Yes i did notice that they were using canvas. I also think three.js. Nice to see it's a series of images in a sequence. I've done that before with GSAP. Thanks for the heads up, much appreciated. 1 Link to comment Share on other sites More sharing options...
Share Posted January 30 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 More sharing options...
Share Posted January 30 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 More sharing options...
Author Share Posted January 30 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 More sharing options...
Share Posted January 30 Hi, Maybe take a look at this thread: Hopefully you'll find helpful insights in it. Happy Tweening! Link to comment Share on other sites More sharing options...
Author Share Posted January 30 This is essentially the same thing. But using GSAP https://www.ju.st/learn 1 Link to comment Share on other sites More sharing options...
Share Posted January 30 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 More sharing options...
Share Posted April 21 I am looking for this and i found my answer here thanks for post this thread. If you IT college student and searching for a research paper, go to this website that provides a computer science research topic that allows me to complete your research paper quickly and easily. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now