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

Just launched my new portfolio site/blog! 🎉

After a lot of thinking and procrastination haha I finally released my personal portfolio out there in the World Wide Web

This is the first blog I truly own and I feel very happy to share the things I've learned in that way

The styles are very minimal 👇

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

✨ Been waiting for this one! ✨

24 layers on the cannon, 64 balls, and not a single inline variable. All powered by sibling-index() and sibling-count().

Working with multiple elements just got way easier! 🤩
(Currently on Chromium only)

🔗 Live demo on @codepen.io: codepen.io/amit_sheen/f...

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 👇👇👇

Outlines not showing up when tabbing to it? 🙅

Having outlines when the user tabs to an interactive element is very important to make websites #a11y (accessible)

This especially important for links

At work, I had this task where I needed to add focus outlines on a link block (card)

Continue 👇

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 👇👇

New Web CSS Design Tip! ✌️💻

Use environment variables in CSS for changing the display of your web elements depending on the browser navigation bar (for iOS expecially)

The vars are:
env(safe-area-inset-top);
env(safe-area-inset-right);
env(safe-area-inset-bottom);
env(safe-area-inset-left);

A beautiful website/message: www.2-c.earth

How to Show the Blogs page in your #Shopify storefront

So, I've seen merchants struggling with the fact that after they create their blog posts, they can't see it in their Shopify site

Thankfully, the solution is simple

This steps can be replicated in almost any theme

1. Go to Content

How to know the page where a script is running in Javascript

Solid way to do it is by reading the URL

`const pathname = window.location.pathname;`

That'll get you smth like:
"blog/dubai-summer-surprises-maximize-revenue-stripe"

If you want only the last piece:
`pathname.split("/").at(-1)`

SDG

Make sure your scrollable containers are focusable

If you have a scrollable horizontal section — pretty popular nowadays — please, make that container focusable

!

It is unaccessible to have a scrollable element that can’t be focused by keyboard

Continue in the next thread...

#a11y