Framer

Things I use to supercharge my @framer websites:

@outseta - user login &amp; members only content
@formsparkapp - simple forms
@splinetool - interactive 3D objects
@lmsqueezy - checkout embed
@usefathom - analytics

What do you use?

CSS Trick ✨

You can create this glitch hover effect by animating pseudoelement content 🎬

button:hover span:after {
  animation: flip 0.2s calc(var(--i) * 0.05s);
}
@​keyframes flip {
20% { content: '_'; }
40% { content: var(--c1); }
60% { content: var(--c2); }
}

It's a funky…

Quick Tip:

My usual setup for each breakpoint in @Framer:

- I turn them into stacks.
- Set the direction to vertical.
- Set the distribute to start.
- Set the gap to 0.
- Set the height to fit content.

This makes it super easy to add new sections to the website.