Emanuele @ Webtales Studio

Desinger & front-end developer, focusing on motion & interactions. Built @FAME_tsx. @framer partner.

[Emanuele @ Webtales Studio @EamanueleWS]

@osbertdev @framer Thanks mate 🙏🏻

[Emanuele @ Webtales Studio @EamanueleWS]

@Ahmad_Carbon06 Thanks for the repost Ahmad 👊🏻

[Emanuele @ Webtales Studio @EamanueleWS]

POV: you unlocked pro text splitting animations in Framer.
Made in @framer with zero code using @FAME_tsx. Text splitter + scroll trigger = Magic.
Inspired by @diabrowser

[Emanuele @ Webtales Studio @EamanueleWS]

@froessell Hey @froessell. Check DMs 👀

[Emanuele @ Webtales Studio @EamanueleWS]

The first batch of invites has been sent.
Currently finalizing the remix file that testers will receive.

Thank you so much for the overwhelming support, everyone.
The love this project is receiving has gone far beyond anything I expected. And if you didn’t get early access, don’t worry, I’ve still got good news for you.

Early access is now closed, but once testing is complete, everyone will be able to try the component. It’ll be available on both my website and @vibeframer.

While FAME won’t be fully free, there will be plenty of ways to use it at no cost, to test it, build templates, share effects, and explore.

I can’t wait to get it into your hands, but I want to make sure the experience feels just right first.

Thank you again. You have no idea how much this support means to me.
Expect more soon 🔥

Peace

[Emanuele @ Webtales Studio @EamanueleWS]

@ayoolatosinn 👊👊👊

[Emanuele @ Webtales Studio @EamanueleWS]

@fahlevidesign @framer Dude, your style is soo good, everything you put out is a gem 💎

[Emanuele @ Webtales Studio @EamanueleWS]

@javoliver88 @DroggoTrogger @rive_app Soooo good man 🔥

[Emanuele @ Webtales Studio @EamanueleWS]

How it started vs How it’s going.

The response to my latest post has been overwhelming. Truly, thank you to everyone who liked, commented, followed, or shared.

The amount of interest for this thing proves that the @framer community really needs a component like this, and that’s fueling me to make it even better.

I’m currently fine-tuning the remix file early testers will receive (with a little surprise baked in), and I’ll be sharing the first batch of invites tomorrow.

Thanks again for all the love 💙

[Emanuele @ Webtales Studio @EamanueleWS]

What is that one thing that, if @framer added it, you would never consider another website builder again?

The scale tool and image export are fine, but in my opinion those are minor upgrades that don't really give Framer a boost in beating competitors like Webflow.

With Framer's delightful user experience, here are the features that I believe would make many designers switch to Framer for good, without looking back.

✅ Precise CSS controls: Why can't I set a 10% padding, or a 20vh top property? These limitations make the experience super frustrating when trying to make more complex designs, making you look for workarounds.

✅ Precise Animation controls: Why can I only animate things in Pixel? Or why can't I add different easings for different animated properties of the same element? Plus, the viewport triggers are too limited, wouldn't it be handier to give the user an interface with full access to the powerful tools that Framer motion offers? like useInView() or useScroll()?

✅ Broader npm libraries support: if you ever tried creating custom component or overrides, you probably know why I'm adding this here.

✅ Authentication and e-commerce functionality: this one doesn't need explaining.

What did I forget? What else would make Framer unstoppable? 👀

[Emanuele @ Webtales Studio @EamanueleWS]

🚨 It’s finally time.

I’m opening up 25 early tester spots for @FAME_tsx, the @framer animation component that unlocks pro-level motion design right inside the Framer UI.

Scroll triggers, timelines, text splitters, advanced interpolation, CSS unit control, staggering, and more, all without having to write a single line of code.

🎁 What's included for the testers:
• Lifetime access
• The remix file with all the effects in the video.
• Power to influence final features
• Lifetime early access to new features and versions.

If you want in, just drop a comment, making sure to follow both me and @FAME_tsx. Over the next 48 hours I'll pick the people.

For everyone else, you'll get access in a week or so, after I gather feedback and squash bugs.

Let’s break Framer (lovingly) 🔥

[Emanuele @ Webtales Studio @EamanueleWS]

Recording with my phone because from screen recording it’s hard to show how smooth scroll animations feel with this component. This was made in @framer using @FAME_tsx. A special announcement is coming tomorrow. Stay tuned 🔥

[Emanuele @ Webtales Studio @EamanueleWS]

Big news coming tomorrow
👇🏻
@FAME_tsx

[Emanuele @ Webtales Studio @EamanueleWS]

Big news coming tomorrow
👇🏻
@FAME_tsx

[Emanuele @ Webtales Studio @EamanueleWS]

@quentinwiley @framer Thanks man 🙏🏻

[Emanuele @ Webtales Studio @EamanueleWS]

Here's one of the most useful and time saving features of FAME (the animation component I'm building for
@framer ). This alone could be a standalone component, and it's so useful when animating multiple elements. But it's just one of the features of FAME.

The quick explanation is this: Imagine wanting each letter in 'Hello World' to have a different rotation, or creating a smooth color gradient across multiple elements. That's exactly what distributed properties do: they automatically generate unique values for each element

Here's how it works: Instead of setting a single value like rotate(45deg), you can define a range - like rotate(0deg → 90deg). FAME then distributes values across your elements. The first element gets 0deg, the last gets 90deg, and everything in between gets proportionally distributed values!

But it gets better! You're not limited to linear distributions. You can set random distributions (the letter value for translateY in the first clip) or choose between 14 different functions to dictate how the values should be applied to each element. See how the distributed translateY values draw 2 of these 14 functions in the second clip.

They support every properties, from background color to filter, to transform etc.

You can also set patterns, or manually insert the values for every element.

Creating animations like the ones in the clips, with the native framer tools would be an absolute nightmare, having to tweak dozens of values across the effect panels of the various elements. Setting up something like this with FAME takes 30 seconds, and if you wanna change the stagger time, or distribution, you just have to tweak a value. And the possibilities are endless.

More on the component in the next days.

See ya!

[Emanuele @ Webtales Studio @EamanueleWS]

@DavidMcBacon @framer Thanks mate 👊🏻🔥

[Emanuele @ Webtales Studio @EamanueleWS]

@irshad_design @framer 👊🏻👊🏻

[Emanuele @ Webtales Studio @EamanueleWS]

@vinayjunejaa @DavidMcBacon Thanks man 🙏🏻

[Emanuele @ Webtales Studio @EamanueleWS]

@osbertooo @framer Actually, I’m working on something sweeter than a tutorial. Can’t wait to share it. 🤫

[Emanuele @ Webtales Studio @EamanueleWS]

Made in @framer using FAME, the animation component I'm building. The component is in its final testing stage, I'm making sure everything works. And while doing so, I'm trying to have some fun using it.

[Emanuele @ Webtales Studio @EamanueleWS]

@DavidMcBacon Thanks for the repost brother 🙏🏻🔥

[Emanuele @ Webtales Studio @EamanueleWS]

A huge amount of my effort has been in making this thing as simple and intuitive as possible to apply. And I think I managed to di it. Here’s how it works: you drop the component inside the element you want to animate (or anywhere in the project really), then you define the animation triggers, animation targets, timeline settings and keyframes. You can assign multiple timelines to the same elements, so that different triggers can do completely different things, and the timelines can animate different properties independently. To explain everything in just a few words is impossible, but to answer your question, yes, I’m pushing this to be as user friendly as possible.