Project Overview

I need a front-end developer/interaction expert to create a scroll-driven, frame-by-frame animation from live-action video. My site will be hosted on Webflow, and I want the ability to edit text or pricing myself after this project is completed.

| Reference Video (Frame.io)

| Here’s the direct link to the mockup video: f.io/z4TcpA4V

| This video shows the exact look, feel, and timing I want to achieve with the final scroll interaction.

Scope & Requirements

1. Live-Action Video Scrubbing

• Convert an MP4 video or image sequence into a smooth, frame-by-frame scroll interaction

(similar to high-end product launch pages).

• Must work seamlessly in modern browsers and degrade gracefully if needed.

1. Custom JavaScript (GSAP or Similar)

• Use GSAP’s ScrollTrigger (or a comparable approach) to control the animation timeline based

on scroll position.

• Ensure performance optimizations (lazy loading, compressed frames, etc.).

1. Webflow Integration

• Since I’m on the free Starter plan, we can discuss the best approach:

• You can build directly in my Starter project as a collaborator if that fits your workspace plan,

or,

• You can build in your own paid Webflow workspace and then transfer the project to me

once it’s ready.

• The final deliverable must be in a Webflow project I own or control, so I can update text,

images, or pricing easily in the future.

1. Responsive & Cross-Browser Compatibility

• Must look great and function smoothly on desktop and mobile devices.

• Address any potential performance issues on mobile.

1. Handover & Documentation

• After completion, provide basic instructions on how I can manage content and make minor

tweaks without breaking the code.

Deliverables

• A Webflow site (or page) with the embedded custom code for frame-by-frame scrolling.

• Optimized assets (video frames or sequence).

• Documentation on maintaining/updating content.

Materials I’ll Provide

• Frame.io Mockup (see link above) showing desired final effect.

• High-quality source video files.

• Webflow account access (Starter plan) or any invites needed for collaboration.

Ideal Candidate

• Proficient in front-end web animation (GSAP, ScrollTrigger, or similar).

• Comfortable with Webflow for custom code embeds.

• Able to optimize video/image assets for fast loading.

• Communicative and detail-oriented.

Timeline

• Approx. 2–3 weeks for development, testing, and revisions.

• Flexible, but I’d like a working prototype within the first 1–2 weeks.

Budget

• Hourly: $25–$60/hour (depending on experience, location, and portfolio).

• Fixed-Price: $1,500–$3,000 total, based on the complexity of the animation and performance requirements.

(I’m open to worldwide freelancers; please include your best rate and relevant examples.)

Required Skills & Expertise

• HTML5/CSS3/JavaScript

• GSAP (ScrollTrigger) or similar advanced animation library

• Webflow (designing & embedding custom code)

• Responsive design

• Video/image optimization

How to Apply

1. Short Cover Letter: Briefly describe your experience with similar scroll-based or frame-by-frame animations.

2. Portfolio: Provide links to past projects highlighting this type of interaction.

3.Proposed Approach: Share a quick outline of how you’d build the frame-by-frame scroll effect (image sequence vs. canvas vs. video).

1. Budget & Timeline: Indicate if you prefer hourly or a fixed-rate, and give a rough estimate.

Thank You!

I’m excited to create a dynamic, immersive experience for my audience. If you have any unique ideas or best practices for smooth performance, feel free to mention them in your proposal. Let’s do this!

• Must work seamlessly in modern browsers and degrade gracefully if needed
• Custom JavaScript (GSAP or Similar)
• Use GSAP’s ScrollTrigger (or a comparable approach) to control the animation timeline based
• Responsive & Cross-Browser Compatibility
• High-quality source video files
• Webflow account access (Starter plan) or any invites needed for collaboration
• Proficient in front-end web animation (GSAP, ScrollTrigger, or similar)
• Comfortable with Webflow for custom code embeds
• Able to optimize video/image assets for fast loading
• Communicative and detail-oriented
• HTML5/CSS3/JavaScript
• GSAP (ScrollTrigger) or similar advanced animation library
• Webflow (designing & embedding custom code)
• Responsive design
• Video/image optimization
• Proposed Approach: Share a quick outline of how you’d build the frame-by-frame scroll effect (image sequence vs. canvas vs. video)

• You can build directly in my Starter project as a collaborator if that fits your workspace plan,
• You can build in your own paid Webflow workspace and then transfer the project to me
• Hourly: $25–$60/hour (depending on experience, location, and portfolio)
• Fixed-Price: $1,500–$3,000 total, based on the complexity of the animation and performance requirements

• I need a front-end developer/interaction expert to create a scroll-driven, frame-by-frame animation from live-action video
• Live-Action Video Scrubbing
• Convert an MP4 video or image sequence into a smooth, frame-by-frame scroll interaction
• (similar to high-end product launch pages)
• on scroll position
• Ensure performance optimizations (lazy loading, compressed frames, etc.)
• Webflow Integration
• The final deliverable must be in a Webflow project I own or control, so I can update text,
• Must look great and function smoothly on desktop and mobile devices
• Address any potential performance issues on mobile
• After completion, provide basic instructions on how I can manage content and make minor
• tweaks without breaking the code
• A Webflow site (or page) with the embedded custom code for frame-by-frame scrolling
• Optimized assets (video frames or sequence)
• Documentation on maintaining/updating content
• Frame.io Mockup (see link above) showing desired final effect
• 2–3 weeks for development, testing, and revisions
• Flexible, but I’d like a working prototype within the first 1–2 weeks
• Portfolio: Provide links to past projects highlighting this type of interaction