Can Webflow support a scrolling animation feature that plays a sequence of PNGs on a webpage? If not currently available, are there plans for this feature to be implemented in the future?
TL;DR
- Webflow doesn’t natively support PNG sequence scroll animations but allows scroll-based Lottie playback as an alternative.
- You can achieve PNG sequence animations using custom JavaScript and external hosting for images or convert the animation into a Lottie file for easier integration.
Webflow does not natively support PNG sequence-based scrolling animations, but there are workarounds using custom code. Currently, there's no official announcement that Webflow plans to add native support for this feature.
1. Current Capabilities in Webflow
- Webflow's native scroll-based animations (via interactions and triggers) allow you to animate elements like opacity, movement, rotation, and scaling based on scroll position.
- You cannot upload and animate a series of PNGs frame-by-frame on scroll without using custom code.
- Webflow does support Lottie animations with scroll-based playback, which is often a better approach for complex animations than image sequences.
2. Workarounds Using Custom Code
- You can create a PNG sequence animation in external software (like After Effects) and export either:
- As a Lottie animation using Bodymovin (and then use Webflow’s native Lottie support), or
- As a list of PNGs and implement a canvas-based scroll-triggered animation using JavaScript.
- For canvas-based methods, you'll need to:
- Upload your PNG image sequence to the Assets panel or a third-party hosting service.
- Add custom JavaScript to play the image sequence based on scroll position (using libraries like ScrollTrigger or vanilla JavaScript).
3. Future Support in Webflow
- Webflow has not announced any official roadmap including native PNG sequence scroll animation support.
- Their current focus is on expanding native Lottie, Interaction, and Video background capabilities.
- You can submit feature requests through the Webflow Wishlist platform, where users vote on future enhancements.
Summary
Webflow does not natively support PNG sequence scroll animations, but you can achieve it using custom JavaScript and image hosting. For more scalable and optimized results, consider using Lottie animations, which Webflow fully supports. No official plans for native PNG sequence support have been announced.