Sneak peek of my new @framer.com component

After some feedback from the Framer team, I'm adding a new field to make it more customizable

This free component will allow you to add 2 images and customize the pixel size, color, etc

SDG

UI Animation/Interaction Rebuild 2:
Untitled Folder: Interactive

This one is sort of a recreation from The Brand Identity Store after effects template

I saw this on a @codrops.bsky.social animation roundup and I thought about building something like it

Codepen:
codepen.io/tony_code/pe...

SDG

Take a look here and let me know your thoughts!

billantony.com

Tech stack:
* Plain HTML 🟠
* Plain CSS 🔵
* Jekyll -> Static site generation 🔴
* No Javascript 🙅

I like this simple approach and hope to take this initial website design a lot further down the road

Great day! ✌️

SDG.

Learning to UI design by copying masterworks. Pt. 1.

I'm recreating the design made by Locomotive agency in the website sundaecreative.com/en

I chose this one because of the compelling design b but also you get what thee website is about just by looking at the hero section

how to do that effect of having the text color be the inversion of its background? 🎨

Only CSS is needed:

```
mix-blend-mode: difference;
```

On the parent element that defines the color

✌️

SDG

Weird Scrollbar in your announcements banner of your #Shopify store? 🟢

Not an issue anymore

I found this beautiful designed Shopify store for Detour Coffee Roasters detourcoffee.com

But I noticed they had this annoying scrollbar in their announcement bar and I decided to do smth about it 👨‍💻

👇👇👇

Recreation of the Market Vision Website in code! 🏢

Done with @gsap-greensock.bsky.social

Codepen link: codepen.io/tony_code/pe...

At first, I thought this was a matter of scale(x) but the image looked awfully blurred in Safari

The solution: transform the `width` instead!!

More 👇👇👇

Hero with shrinking title interaction 🔵

Made using @gsap-greensock.bsky.social and #Webflow!

The new GSAP visual editor in Webflow is so nice 🤌

It finally helped me understand how the start/end setting from Scrolltrigger worked!

Link in the next one 👇👇

When you scroll up (in Safari on iOS) you'll see the browser bar in the bottom of the website, covering the content of the website 🙅
(See 1st image)

To prevent your content to be covered by the browser bar, use the env variable named safe-area-inset-bottom
(See 2nd image) ✅

SDG.

7. Finally, hit save and go to your live page to see your blog posts link! 🎉🎉

Have a nice day y'all!

SDG.

6. Give it the name you want and in "Link", look for Blogs > The name of the blog you want to publish

5. Select the menu you want to add the Blog posts pages in > Click "Add menu item"

4. Now, to display it publicly to your site visitors, go to Content > Menus

3. Add blog post > Write your title, content, etc > Change visibility to "visible" > Hit "Save"

2. Blog Posts

The default blog that all Shopify stores have is called "News"