Scrolling PNG sequence animation

Is it possible to have a sequence of PNGs play back when the user scrolls down the page? This would be REALLY useful for a site I’m working on. If not right now, is this coming soon?

Also referenced here:

Maybe this is what you’re looking for:

Cheers,

@aaronocampo Thanks, I’ll have a look. :blush:

Not exactly. I’d like to be able to control the playback of the video/PNG sequence with scrolling, similar to what Apple.com has here where the screen animation/touchbar animates as you scroll.

I’ve added this to the wishlist. Please vote for it: Scrolling Video controls (MP4/PNG/Image Sequence) | Webflow Wishlist

Maybe its taken into account here

I don’t see any mention of it in the feature list. But some cool stuff there for sure.

Sorry, I’m not following you, I’m not understanding what exactly is what you want.

I think this could be something else that you could use, if not can you be more specific please?

http://history-of-animation.webflow.io

Do you know what it’s like to scrub through a video and control the playback? That’s what I mean. Only in this case, it’s being controlled directly with the scroll wheel.

If you look at the Apple.com Macbook Pro link I posted above, you can see that the powder explosion on the screen of the Macbook can be “scrubbed” backwards and forwards as you scroll up and down respectively with your mouse.

Does that clear up what I mean?

1 Like

I see what you mean now. I don’t think there is a way to do it natively at this moment in webflow but maybe with custom code.

This is correct. Also, I highly doubt interactions 2.0 which is coming soon, will support this (video playback position).

@samliew, While it contains a bunch of frames, and could be considered a video, a string of PNGs isn’t technically a video. I don’t know if that changes anything. :slight_smile:

The benefit of using PNGs would be transparency and control over compression vs. using a video which would require codec support.

@samliew Sorry, you were right. Video playback control IS what I’m looking for. :smile:

1 Like

Of course, if you want to export your video to pngs, can still do it in custom code.

@samliew What would be the best way to impliment this (http://codepen.io/anon/pen/mJwbK ) using custom code?

The effect on apple.com is actually interaction. The touchbar thing thats move, is just a DIV.

So depending on what you want, it can be solved. But it sounds like its a full frame moving video, and that would be something else :slight_smile:

That’s a video. All the custom code needed is in that codepen, otherwise it won’t be working.

This topic was automatically closed after 60 days. New replies are no longer allowed.