Jump to content


Attributes changed?

Moderator Tag

Recommended Posts

Is there a way to determine whether any attributes have been updated between two frames?



I'm stepping through all the frames of my animation, rendering PNG's and sending these to ffmpeg (on a server) to create an MP4. The animation is paused and I just advance the progress based on the desired framerate of the output video.


When nothing has changed from one frame to the next, I would like to not send the (sometimes quite large) PNG but just tell the server to re-use the last one. What would be the easiest way to determine whether anything has changed?


Thanks in advance :)

Link to comment
Share on other sites

Hey jorma. Are you asking if you can detect visual changes or value changes? 


If all you're doing is animating with GSAP, I'd look into using the onUpdate method that GSAP provides and then inside of that looping through the elements that you're animating. Then you can use .getProperty() to get the value and compare it to a list of previous values for each property of each element. You could optionally check to see if the difference is greater than some amount, but that would vary depending on the data type of each value.

  • Like 1
Link to comment
Share on other sites

Hey Zack,


Thanks for your answer. At the end of the day I want to know if the image of the previous frame is any different from the image in the current frame. I was hoping GSAP would perhaps have some hook to look at an object that shows all the elements and their properties that are being updated in that cycle.


What I'm thinking now is that I might just compare a stringified version of the SVG from one frame to the next. Or perhaps the base64 encoded of the PNG... not sure how expensive such an operation would be. But pretty sure it's cheaper than the overhead of sending the image.


Will investigate and report back!

Link to comment
Share on other sites

It seems comparing even pretty large strings is cheap enough for my use case. Like I mentioned in my previous comment, I stringify the SVG, hold on to the last one and compare it to the new one on the next frame. When they're identical I just tell the server to re-use the last image rather than send a new one. Works pretty good.




If anyone is interested (and reading this) I'm creating video out of an animated SVG. At first I just stepped through all the frames of the animation, created a PNG by drawing the SVG on a canvas and sending the PNG over a WebSocket to the server. The server would collect all images and render a video and send it back.


Especially when working with images rather than big coloured area's the size of the PNG's would balloon pretty quick. And given that there were quite some static parts to the animation (sending the exact same image for each frame), I started looking at optimisations. The one I describe above works fairly well as a first step and also when memory resources on the client are low (like in some Citrix environments).


Another strategy that I've looked into is creating a zip-file on the client of all the frames and sending that file in one go. This has the downside of requiring quite some memory but I hoped it would allow much better compression. It turns out however that Zip does not compress across the files in a Zip-file but only within files. And seeing as PNG's are already compressed this helped nothing.


So, I figured I'd try creating a Tarball first (one file) and zipping that. Unfortunately, I couldn't get any of the JS libraries that should do that to work. I have yet to investigate other strategies like creating a big old string base64 encoded PNG's and zipping that. But anyway, that's what I tried. I hope it's useful to someone some day.



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.