The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
DD39: Autoplay Video on Viewport
Play videos when they enter the viewport. Pause when they leave. Zero scroll listeners
Supports 3 ways to configure: global defaults for the whole project, per-instance options via constructor, and per-element overrides via data attributes.
Full source - https://community.sivuo.com/dd/dd39-autoplay-video-on-viewport
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Sunny Rock — Cinematic Paris Travel Website | Creative Web Development
Experience Paris through Sunny Rock, a cinematic travel website concept designed to combine immersive visuals, elegant UI/UX, and interactive scrolling into a premium digital experience.
This self-directed project explores modern web design through cinematic imagery, scroll-driven animations, glassmorphism, smooth transitions, and responsive layouts.
🛠️ Technologies & Skills
HTML5 & CSS3 — Semantic structure, modern styling, and responsive layouts
JavaScript (ES6+) / TypeScript — Interactive behavior and animation logic
React.js — Reusable components, hooks, and state management
Tailwind CSS — Utility-first styling and responsive design
HTML5 Canvas API — 2D rendering for visual effects and image sequences
Scroll-Driven Animation — Frame-by-frame image sequences synchronized with scrolling
requestAnimationFrame & Linear Interpolation (Lerp) — Smooth animation updates
Lenis Smooth Scrolling — Fluid scrolling experiences
Intersection Observer API — Scroll-triggered reveals and entrance animations
UI/UX & Visual Design — Visual hierarchy, typography, glassmorphism, and interaction design
SVG Graphics — Scalable icons and vector elements
AI Visual Generation & Prompt Engineering — Cinematic visual assets
Cloudinary — Media hosting and image optimization
Performance Optimization — Efficient asset loading and animation rendering
Python & Browser Automation — Development utilities, asset processing, and testing
✨ Design Highlights
Cinematic, immersive visual storytelling
Premium travel-inspired aesthetic
Smooth, scroll-based animation sequences
Modern glassmorphism interface
Responsive layouts for different screen sizes
Interactive elements and refined micro-interactions
Project Type: Self-Directed Portfolio Project
Focus Areas: Creative Front-End Development · Web Design · UI/UX Design · Interactive Experiences · Animation
Designed and developed by Ubaid | Ubaid Web Studio.🔥
Designed a step tracking screen where you can see your daily progress and weekly trend in one glance.
Same screen, two shots. Which one would stop your scroll? 👀
11 voted
73%
4 voted
27%
15 votes
Closed
Turns out the future does have flying cars.
Last week a Roadster flipped upside down over five parked Teslas, and the clip passed 26M views in a day. I turned that moment into a scroll-driven 3D piece: scroll to fly the car, hold to boost, with the facts one tap away.
Independent concept — real demo, brief airborne maneuvers, nobody inside. The rest is imagination.
Built with Three.js: custom thruster FX, depth-of-field, scroll-linked camera, one-tap 9:16 clip export.
Available for interactive and 3D web work. DM me. 🛠️
Great work! Very good animation and smooth experince.