💰 Budget: 3000$
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: https://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.
2. 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.).
3. 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.
4. Responsive & Cross-Browser Compatibility • Must look great and function smoothly on desktop and mobile devices. • Address any potential performance issues on mobile.
5. 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.
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).4. 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!