Jump to content
Search Community

AirPods image sequence animation using ScrollTrigger

marius96 test
Moderator Tag

Recommended Posts

Is there a way to pause the image sequence? If the container featuring other animations on top of the image sequence canvas is e.g. 30000px, the image sequence would pause between the 15000-20000px of scrolling?

Link to comment
Share on other sites

28 minutes ago, J4N1P said:

Is there a way to pause the image sequence? If the container featuring other animations on top of the image sequence canvas is e.g. 30000px, the image sequence would pause between the 15000-20000px of scrolling?

Hey J4N1P and welcome to the GreenSock forums.

 

Sure, you just need to make the image sequencing a part of a greater timeline and attach a ScrollTrigger to that timeline.

  • Like 1
Link to comment
Share on other sites

Let's say you wanted it to pause between frame 50 and 100 - you'd create one tween that goes from frame 1 to 50, and then a separate tween that goes from 100 to the end frame, and just place those tweens on the timeline accordingly (with space between them for the pause). 

  • Like 3
Link to comment
Share on other sites

Please help me! I tried so many ways but cannot make it work...

Could someone please fork this: 

See the Pen MWJpROv by j4ni1p (@j4ni1p) on CodePen

If I wanted that image sequence to pause to frame 164 (that's when T and Y letters are in place), and the some of the text divs would animate. After few text div appearing and disappearing, the image sequence would continue. How it's done???

Link to comment
Share on other sites

Like I said earlier, you'd need to create a timeline with two tweens - one to animate the frames to 164, then another for the rest, and then place that 2nd tween further in the timeline (have a gap which would make things appear to pause). 

 

I don't have time to build everything for you or do the calculations to time things precisely, but here's the general idea:

See the Pen 2a69bb29f6851d9265a9e1e84e3746a3?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I hope that helps. 

  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...

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. 

Link to comment
Share on other sites

25 minutes ago, Parthiban said:

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;

 

Loading one image should be faster than loading 100 images, but we're in an http2 world, so the difference is negligible. 

 

This is my performance tip.... get your animation working first. If you notice a performance problem, I will personally help you fix it.

 

  • Like 1
Link to comment
Share on other sites

On 4/23/2021 at 1:16 PM, Parthiban said:

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

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

 

See the Pen xxgeYBV by parthiban-repo (@parthiban-repo) on CodePen

 

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. 

Link to comment
Share on other sites

Well, the only way to make it download faster is to have a faster internet connection. The best thing to do is to make sure your server is allowing those images to be cached so the user doesn't have redownload them again on subsequent page visits.

 

Another option would be to use video instead of images. You should be able to set the playhead of the video using ScrollTrigger.

Link to comment
Share on other sites

12 minutes ago, OSUblake said:

Well, the only way to make it download faster is to have a faster internet connection. The best thing to do is to make sure your server is allowing those images to be cached so the user doesn't have redownload them again on subsequent page visits.

 

Another option would be to use video instead of images. You should be able to set the playhead of the video using ScrollTrigger.

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?

Link to comment
Share on other sites

3 hours ago, OSUblake said:

GSAP will still use rAF, but the smoothness is ultimately going to be determined by how many frames there are. The same goes for canvas. The more images you include, the smoother it might be.

 

Just a simple demo using video.

 

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

Link to comment
Share on other sites

  • 3 weeks later...
On 8/19/2020 at 4:55 AM, marius96 said:

s @sbest58 said in this topic, this is a process that takes a lot of trial and error.

For desktop, the sweet spot for me is 15 rows and 10 columns for a total of 147 images.

Thank you for this work. I am using it as a template for my own sprite sheet images, but I am struggling to make the container fill the viewport. The image just will not change its height and width to fill the viewport. Help would be appreciated.

Link to comment
Share on other sites

  • 5 months later...
On 8/20/2020 at 12:32 AM, OSUblake said:

 

Changing the image source isn't a good idea. It takes 1 line of canvas code to draw an image in canvas.

function render() {
  context.drawImage(images[airpods.frame], 0, 0); 
}

 

If the images have a transparent background, then it would be only 2 lines.

function render() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(images[airpods.frame], 0, 0); 
}

 

 

See the Pen

See the Pen 2152a28cffe2c2c0cca8a3e47f7b21c6 by osublake (@osublake) on CodePen

by osublake (@osublake) on CodePen

 

 

 

 

Hey, this example works great however I can't seem to be able to use it with snapping? It seems to just completely ignore my snap property inside scrollTrigger? I also noticed the top level gsap tween has a snap property itself set to "frame". Is this conflicting? I need the following combination: Image Sequence animation based on scroll position (scrollTrigger) with scrubbing and multiple snapping points to custom frames where I can have text show/hide. Is this possible?

Link to comment
Share on other sites

1 hour ago, Rockethouse said:

I also noticed the top level gsap tween has a snap property itself set to "frame". Is this conflicting?

 

That just rounds the frame number, so no.

 

1 hour ago, Rockethouse said:

I need the following combination: Image Sequence animation based on scroll position (scrollTrigger) with scrubbing and multiple snapping points to custom frames where I can have text show/hide. Is this possible?

 

You could probably get pretty close to a frame number. Lets say there are 250 frames in the animation and you want to snap to 100th frame, then the snap value would be 100 / 250 = 0.4.

  • Like 1
Link to comment
Share on other sites

Hi everyone,

 

I've been tasked with implementing something similar to the AirPods example, and for the most part I have a working example. However, my animation will sit in between other sections on a web page. This issue i'm experiencing is that pinning the animation sequence does not stop content below the animation from continuing to scroll. So the question is, how do you prevent content below the animation from scrolling into view until the sequence animation has completed? I've only been using GSAP and Scroll Trigger for one day so i'm very new to these products. Any help would be appreciated.

Link to comment
Share on other sites

  • 1 month later...
On 8/19/2020 at 5:02 PM, OSUblake said:

 

Changing the image source isn't a good idea. It takes 1 line of canvas code to draw an image in canvas.

function render() {
  context.drawImage(images[airpods.frame], 0, 0); 
}

 

If the images have a transparent background, then it would be only 2 lines.

function render() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(images[airpods.frame], 0, 0); 
}

 

 

 

got a question in this code :

gsap.to(airpods, {
  frame: frameCount - 1,
  snap: "frame",
  scrollTrigger: {
    scrub: 0.5
  },
  onUpdate: render // use animation onUpdate instead of scrollTrigger's onUpdate
});

what does snap: "frame" mean ?

and frame: framcount -1 too ?

 

Link to comment
Share on other sites

Hey there @Andy1708 - I deleted your other post as it was a duplicate.

But in answer to your question


You can give snap a comma-delimited list of properties that you're animating if you need then to 'snap' to the closest integer on update. It's useful in that demo because the airpods.frame should never be something like 5.25221566341.

If you were also updating the y value you could snap that property too like so...

 

gsap.to(airpods, {
  frame: frameCount - 1,
  y: calculation * 10,
  snap: "frame,y",
}

 

  • Like 1
Link to comment
Share on other sites

  • 2 months later...
On 8/20/2020 at 5:32 PM, ZachSaucier said:

If you start stripping things out (to focus on the issue at hand) you will find that when you delete the "all" section it works just fine. Looking inside of that part, there's a competing ScrollTrigger that is never removed since it's within the "all". Did you mean to put it inside of the desktop breakpoint instead?

 

 

This was exactly what I was looking for . Thank you for sharing - I know its a long shot since its a bit old but is there away to scroll to another section once the last text animation or frame animation is finished.  I created a new section and the background is white - but for some reason once the animation is finished I cant seem to scroll to the next section. For the life of me I cant seem to get it working. Position is set to fixed - I think thats the issue but am not sure what to do .

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