Cette offre d'emploi n'est plus disponible
À propos
We are building a website (Webflow) and need a performance-sensitive website preloader animation designed for developer implementation.
This is not a splash screen or logo reveal video.
It is a user-interruptible preloader — a short animation that manages perceived load time while the page initializes. The loader must exit immediately if the visitor interacts (scrolls, clicks, presses a key, or touches the screen).
We already have:
• a storyboard attached (png) showing the sequence and intent
• prepared SVG logo elements (two variants: light and dark) — these will be shared with the freelancer who is selected
You will design the motion behaviour and prepare assets so a developer can implement the animation using inline SVG and GSAP inside Webflow.
A working project file handoff is required so we can adjust timing or sequencing later without recreating the animation.
⸻
What You Will Do
• Import and optimize provided SVG elements
• Design motion choreography (reveal, growth, alignment, settle)
• Determine pacing and easing
• Ensure the animation feels intentional and fast (not decorative)
• Prepare clean web-ready SVGs
• Produce both light-mode and dark-mode animation variants
• Provide a clear timing specification for developer implementation
• Provide working project files
The loader should feel like a system initializing — not an intro animation.
⸻
Light & Dark Variants (Important)
We will provide two SVG logo versions:
• a light-mode version (dark elements)
• a dark-mode version (white elements)
You must prepare and export both variants so the animation works correctly on light and dark backgrounds.
The animation timing and behaviour should be identical across both modes.
Deliverables should clearly label the two variants so they can be swapped by the developer via CSS/theme.
⸻
Key Behaviour: User-Interruptible Preloader (Important)
The loader must be designed so it can exit cleanly at any moment.
The developer will end the animation when:
1. the user interacts (scroll, click, touch, or keypress), OR
2. a maximum duration is reached (~5 seconds)
Therefore:
• No motion dependent on a fixed ending frame
• No "final impact beat"
• Partial animation states must still look intentional
• The completed logo state must be reachable smoothly from any point
• The animation should not reverse when interrupted
Think operating system initialization — not a video clip.
⸻
Deliverables
1. Clean, optimized SVG files (properly named layers)
2. Light-mode and dark-mode variants (clearly labeled)
3. Motion timing sheet (durations, delays, easing curves)
4. Reference preview video (for timing reference only)
5. Working project file (After Effects .aep, Rive .riv, or Figma file — whichever you used)
6. Any modified vector source files
⸻
Animation Constraints
• Total runtime target: 3–5 seconds (must still feel fast)
• Transparent background
• Must work on both light and dark backgrounds
• Vector only (no raster layers)
• No particles, glows, cinematic effects, or heavy blurs
• Avoid bouncy or playful easing
This is a trust-building UI behaviour, not a brand video.
⸻
Technical Constraints
The animation will be implemented as:
• Inline SVG
• JavaScript animation (GSAP)
• Full-screen overlay that fades to reveal the site underneath
Please design with implementation in mind:
• Minimize anchor points
• Clean path geometry
• Consistent viewBox
• Logical layer naming
⸻
Timeline & Communication
• I will allocate immediately to the right person.
• Delivery required by Sunday.
• I am available for revision feedback at any time (except when sleeping) to ensure we hit the deadline.
⸻
Ideal Experience
Strong fit:
• Product websites
• SaaS marketing sites
• Developer tools
• Performance-aware web motion
Not a fit:
• Social media video editors
• Cinematic logo reveal specialists
• Lottie-only workflows
⸻
When Applying
Please include:
1. Examples of website loaders or UI motion work (not brand videos)
2. What tool you would use to design the timing
3. Confirmation you will provide full working project files
4. Your fixed price estimate
5. Confirmation you can deliver by Sunday
Full SVG assets will be provided immediately upon selection.
Contract duration of less than 1 month.
Mandatory skills: SVG, Webflow, Interactive Design, GSAP, Responsive Design, Animation Design, Motion Graphics, Adobe After Effects, UI Animation
Compétences linguistiques
- English
Avis aux utilisateurs
Cette offre a été publiée par l’un de nos partenaires. Vous pouvez consulter l’offre originale ici.