Probably the best compliment you can get from a client.

While working with a Luxury e-commerce store in little over 30 days, we have got over 50 cold emails from Digital Marketers pitching offers.

No one was able to present themselves professionally, let alone convince me.

2 Big Red Flags:
- No professional email
- No social proof

Just shipped Gry Space website, a multi-disciplinary Creative Studio with passion for minimal yet functional design across Art, Objects, Space and Nature.

I was able to carry out the intro animation semantically (without position: absolute hack) with @gsap-greensock.bsky.social Flip plugin.

As fullpage.js requires a paid license for commercial use, I used Vanilla JS + @gsap-greensock.bsky.social to create this "Magnetic Scroll Snap" effect for the client project.

Features:
1. Tactile-like experience to keep users engaged
2. Works with Webflow CMS images
3. Keyboard navigation support

My first professional attempt at designing a "Landing Page".

I recently took the "Show Them" course by Legendary @robhope.com

Easily one of the best courses in this niche.

I took all that knowledge and applied it to "Fictitious VLC landing page".

Let me know how I did.

Playing around with Marquee Animations.

This one is made using @gsap-greensock.bsky.social morphSVG Plugin.

Your feedback would be deeply appreciated.

What can possibly be the reason Webflow doesn't include GSDevTools in @gsap-greensock.bsky.social tab?

GSDevTools gives you a visual UI for interacting with and debugging GSAP animations.

Like animation controls, tweaking and fine-tuning, jumping to a specific scene.

Get solution in comment.

The Porsche 911 Turbo stops on the middle of the road at the Cliffside Coastline, creating an "Automotive Prestige".

Made with @gsap-greensock.bsky.social

Live Site: one-page-wonders.webflow.io/automotive-p...

Webflow: webflow.com/made-in-webf...

@codepen.io : codepen.io/Mahad317/pen...

Here's a GSAP-Enhanced Accessible Accordion.

Benefits include:
Accessibility
Semantic Markup & Better SEO
Auto-collapsible Items with @gsap-greensock.bsky.social

Live: one-page-wonders.webflow.io/gsap-enhance...

Webflow: webflow.com/made-in-webf...

@codepen.io: codepen.io/Mahad317/pen...

Want to instantly grab the visitors' attention?

Consider animating "Above the Fold" section in creative ways.

"Vision and Shadow" is built exactly with that in mind.

Find the cloneable in the comments and your Feedback is much appreciated.

Live site: one-page-wonders.webflow.io/vision-and-s...

"Lone Explorer Parallax" is a story of a guy seeking solace as he reflects career.

Made with @gsap-greensock.bsky.social

Live Site: one-page-wonders.webflow.io/travel-paral...

Webflow Cloneable: webflow.com/made-in-webf...

@codepen.io: codepen.io/Mahad317/pen...

"Burger Hero Parallax" is a hero section of "Jazzy's Burger" that create eye-catching parallax animation on scroll with different layers of the burger.

Live: one-page-wonders.webflow.io/burger-hero-...

Find cloneables in comments.

Let me know you thoughts in comments.

I'm beginning a new series of highly animated and interactive motion sites called "One Page Wonders".

The idea is to draw inspiration from unconventional and mesmerizing Design Experiences.

This one is "Consequential Hover Effect" by super-talented Suz Sirunyan.

Cloneables linked in the comments.

"Burning Text Effect" with @gsap.com

For some odd reason, Webflow enforces lowercase class names.

Since general CSS is case-sensitive, you might run into issues if you don't adhere to Webflow's rules.

As a rule of thumb, use lowercase class names across your building including external scripts.

An exploration with a fun little text animation with @greensock.bsky.social that explodes to the screen. I'm calling it "Spectrum Burst".
Codepen Link: codepen.io/Mahad317/pen...