Category: Framer
-
Framer: Custom CSS in overrides
—
In Framer overrides you can’t directly “attach a CSS file”, but you can inject CSS into the page from the override. Option 1 (best): Inject a <style> tag once
-
How to Add an Override in Framer
—
Applying the override to a Framer Component Now that you’ve written your override, it’s time to connect it to an element or a Framer Component in your design. Using Pre-Made Framer Overrides Multiple online libraries provide free pre-made overrides that you can copy and paste directly into your project (including those available on our site).…
-
How to add a custom class to an element
—
To add a custom class, you’ll need to use an override that modifies the element’s className property. Overrides let you extend or adjust an element’s behavior without changing its core structure.
-
Add Advanced CSS Styling to Framer Code Components
—
in FramerFramer code components are powerful, but they have one limitation: you can’t include separate CSS files. This becomes problematic when you need to style pseudo-elements or use vendor-specific properties that don’t work with inline styles. The solution is straightforward: create a multiline string variable for your CSS styles and inject it using a style tag.…
-
Animating between variants on scroll (Scroll variants)
—
in FramerTrigger smooth transitions between component states as visitors move through the page
-
Property Controls
—
in FramerProperty Controls allow users to pass properties (or props) to a code component through the Framer interface. When a user selects a code component on the canvas, its Property Controls are visible on the properties panel. As a component author, it’s up to you to decide which Property Controls to add and what options they…
-
Framer Code Components and Code Override
—
in FramerCreating components in Framer is a breeze. It’s also extremely powerful. However, if you really need to go beyond the pixels and make something custom, you’ll need to venture into the space of “Code Components & Overrides”. They are amazing as they completely remove the ceiling of what you can achieve in Framer by adding…
-
Responsive Animations with Framer Motion (Media queries in Framer)
—
in FramerUsing media queries in javascript Responsive Animation with Variants Responsive Framer Motion with CSS Variables
-
The only video you need to learn Framer scroll animations
—
in FramerYou’ll discover how to set up sticky positioning, plan your animation timeline, and execute the animation using Framer’s scroll transform effect.
-
Create a CMS Gallery Slideshow in Framer
—
in FramerFramer University article (non chiaro). Demo su X
-
Horizontal Scrolling Effect
—
in FramerThe demo clearly demonstrates how to set up a horizontal scrolling section on your Framer website. About the resource This effect leverages two key features of Framer. Remix project
-
Music Player Widget Interaction in Framer
—
in FramerThis is a music player widget interaction component recreated in Framer, original work by Vaun Blu.
-
Play Sound On Click
—
in FramerThis is a demo file that shows you how to create a component that plays sound when you click the element.
-
Updates – Overlay in CMS
—
in FramerAdd the ability to add Overlays to content in a CMS Collection List.
-
Updates – Workshop
—
in FramerTurn ideas into working components just by describing them. No code. No setup. Just a quick chat.
-
Scroll Animations
—
in FramerWe are thrilled to introduce our new feature in Framer: Scroll Animations!
-
10 parallax scrolling examples to inspire your web design
—
Framer’s built-in tools let you create a parallax effect directly on the canvas of your website without having to code.