Hannes Atian - Framer Designer | ContraWork by Hannes Atian
Hannes Atian
max

Hannes Atian

Framer Pro Expert. Animated sites built solo.

    $25k+
    Earned
    4x
    Hired
    5.00
    Rating
    99
    Followers

Bacoor, Philippines

WorkPostsReviewsServicesAbout

Bacoor, Philippines

Cover image for CWOLF Industries Product Catalog | Framer CMS & Quote Funnel
CWOLF Industries Product Catalog | Framer CMS & Quote Funnel
1
5
Every Shelter Nonprofit Website | Framer Development
1
3
Cover image for Universal Language Storefront | Headless Shopify on Framer
Universal Language Storefront | Headless Shopify on Framer
1
5
Push AI Marketing Landing Page | Figma to Framer
4
11
Koollab Agency Website | Framer Design & Development
3
11
Dash Agency Website Redesign | WordPress to Framer
2
14
Fillr Recruiting Startup Landing Page | Framer & Jitter
3
12
Fortify Education Website | Figma to Framer Development
2
12
Cover image for Creative Director Portfolio Site | Figma to Framer
Creative Director Portfolio Site | Figma to Framer
2
14
Cover image for Vanguard Store Fixtures Website | Web Design
Vanguard Store Fixtures Website | Web Design
2
20
Cover image for My client needed just a bit more design flexibility in their...
My client needed just a bit more design flexibility in their @Framer CMS. Instead of suggesting an alternative platform, I asked them what kind of flexibility they needed. They gave me a reference website. Essentially, they wanted a CMS where we could extend the in-line images full-width and stack them in a row, both of which aren't possible natively in Framer. I looked for resources online: code overrides, custom components, etc. I found one that allowed full-width images, but I couldn't find anything about making multi-column image rows. So I went to work modifying the code override to include functionality to stack images horizontally. And, after some trial and error and a little help from ChatGPT, I was able to do it. Curious how it works? Let me know.
1
3
440
Here's how I created this simple rotating carousel in 3D space. First, I created the component in Framer to contain everything. I then added several Stacks inside it with Absolute positioning. In this example, we have 6 items total, but we need to double it for a total of 12 so we could have a nice loop. Each stack has a single frame here rotated 90° in the y-axis. These frames serve as the image containers. I then rotated the stacks on the y-axis in equal intervals, forming a propeller shape with the images at the ends. For 12 items like we have here, the interval is 360° ÷ 12 items = 30 degrees. It's simple but a little bit crazy to think about! Had a lot of fun making this. Preview: https://3d-carousel-ha.framer.website/ Steal it from this remix link: https://framer.link/09wJssC
2
321
Cover image for Optimally Portfolio Website | Framer CMS Development
Optimally Portfolio Website | Framer CMS Development
3
6
Cover image for CCF Mastermind Real Estate Landing Page | Framer
CCF Mastermind Real Estate Landing Page | Framer
2
5
Process section for Dash, a retention marketing agency based in India. Built in Framer.
2
265