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
A little wait, a lot of motion. 🟠
A preloader animation that counts smoothly from 0 to 100%, turning loading time into part of the experience.
Built with CSS and GSAP, where even the smallest details matter.
#GSAP #WebAnimation #FrontendDevelopment #CreativeCoding #WebDesign
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
Every AI product apologizes for the wait. I designed the wait instead.
Latency: identity, interactive site and campaign built on Ma, the space that gives a thing its shape. The headline breathes in weight until the answer lands.
Design the pause.
Man, you’re superhuman; your consistency and quality are out of this world... congratulations on your work.
𝗜𝘁'𝘀 𝗗𝗮𝘆 𝟭𝟬 𝗼𝗳 𝟯𝟬𝗱𝗮𝘆𝘀
𝗦𝗵𝗼𝗽𝗶𝗳𝘆 𝗦𝗽𝗲𝗲𝗱 𝗢𝗽𝘁𝗶𝗺𝗶𝘇𝗮𝘁𝗶𝗼𝗻: How to Score 95+ on Google PageSpeed Insights
Is your Shopify store slow on mobile? Slow load times directly hurt your conversion rate.
𝗧𝗼-𝗱𝗼 𝗟𝗶𝘀𝘁:
1. Compress banners to WebP format.
2. Remove unused tracking app scripts.
3. Preload critical brand fonts.
4. Defer non-essential JavaScript.
𝗧𝗼𝗼𝗹𝘀 𝘁𝗼 𝘁𝗲𝘀𝘁 𝗼𝘂𝘁 𝘆𝗼𝘂𝗿 𝘀𝗶𝘁𝗲 𝘀𝗽𝗲𝗲𝗱:
𝗦𝗵𝗼𝗽𝗶𝗳𝘆 𝗦𝗽𝗲𝗲𝗱 𝗧𝗲𝘀𝘁: https://www.shopify.com/ng/compare/sitespeed
𝗦𝗵𝗼𝗽𝗦𝗰𝗮𝗻 𝗔𝗽𝗽: https://www.shopscan.app/tool/shopify-speed-checker
𝗧𝗵𝘂𝗻𝗱𝗲𝗿𝗽𝗮𝗴𝗲𝗦𝗽𝗲𝗲𝗱: https://www.thunderpagespeed.com/tools/speed-test/
𝗪𝗮𝘁𝗰𝗵 𝗼𝘂𝘁 𝗳𝗼𝗿 𝗺𝗼𝗿𝗲 𝘁𝗶𝗽𝘀 & 𝗵𝗮𝗰𝗸𝘀
Day 10 of 30 and you are unstoppable, Abdullahi. Removing unused tracking scripts is the one most stores ignore and the one that hurts most. Preloading critical fonts plus deferring non-essential JavaScript is the real speed formula. Sharing the testing tools makes this genuinely actionable.
VELOUR is a luxury perfume-store concept featuring a cinematic 3D entrance: the camera approaches the boutique, the doors open, and visitors discover the fragrances inside.
The experience includes interactive perfume bottles, animated spray effects, a personalized scent quiz, product filtering, bottle-size selection, and a shopping bag. A complete demo checkout takes visitors through delivery details to an order-confirmation screen.
Built with HTML, CSS, JavaScript, and WebGL, with responsive layouts and motion controls. This is a frontend showcase; checkout does not process real payments or orders.
The cinematic 3D entrance is a stunning way to sell luxury online, Arooj. Doors opening into the boutique makes the whole experience feel theatrical. A personalized scent quiz plus a full demo checkout shows you think beyond visuals.