framer.top

Animating transitions between pages in Framer (Animation Lesson 14)

Jumping between pages doesn’t have to feel jarring. With Page Effects in Framer, we can add smooth transitions that make our sites feel more cohesive — almost more “app-like”. Your site flows from one page to the next. It’s a small touch that helps everything feel more like a product and less like a collection of separate pages. In this lesson, I’ll show you how to easy it is animate between pages in Framer.Grab the remix link from Framer Academy: https://www.framer.com/academy/lessons/framer-an

Framer Update: Fit Image

Introducing Fit Image, a new sizing option unique to Framer. In most design tools, images have a fixed width and height you set on the canvas, which means you need to match the aspect ratio of your frame to the image source. That stops working when dealing with dynamic content, like our CMS. Fit Image solves this by adapting automatically to the width or height of uploaded images, opening up new layouts, responsive design possibilities, and future interactions. Only in Framer. https://framer.com

Introducing Design Pages

Introducing Design Pages, a new way to design and iterate in Framer. This update turns Framer from a web builder into a true design tool. Design Pages give you a freeform canvas to explore in, with all the tools you might need, like vector editing, P3 colors, image exporting, advanced masking, and much more. Experiment and play without having to think about responsiveness. Turn any iteration into a Web Page with a single click. Adding Breakpoints is so much easier when starting with Design Pages

Framer Event — Making room for big ideas

Join us September 16 at 10AM PDT for a short but game changing feature drop. Add the event to your calendar → https://www.framer.com/events/MB01CNQA5GSYTRJ

Using Events for nested interactions in Framer (Animation Lesson 13)

Sometimes we end up with an interaction inside of a component that we need to trigger from outside of that component.A special type of interaction in Framer, called an “Event”, makes that possible. Events are essential variables for interactions, which let us bubble up interactions within a child component so they can be use in a parent component or overlay. In this lesson, we’ll explore a couple common examples of scenarios where Events save the day.00:00 Intro00:21 Setting up the parent compon

Making room for big ideas — September 16

Join us September 16 10AM PDT. https://www.framer.com/events/

Adding animated effects at the component level in Framer (Animations Lesson 12)

By adding animation effects at the component level, we can ensure every instance of that component shares exactly the same polish. In this lesson, we’ll combine what you know about components with the Appear Effects we learned about at the beginning of the course. Animating at the component level keeps your design consistent, your workflow efficient, and is a great way to scale polish across your whole project.00:00 Intro00:18 Setting up component instances01:20 Applying appear effects to a comp

Creating Animated Component Interactions (Animations Lesson 11)

Components are the building blocks of any interactive site — and when you add animation to them, they become so much more than static pieces. By combining component variants with interactions, we can create dynamic components that respond to taps, clicks, hovers, and more. In this lesson, I’ll show you how to wire up interactions inside your components and animate between variants to create polished, reusable elements that feel alive.Grab the remix link from Framer Academy: https://www.framer.co

Framer Update: Multi-Select for Pages and Assets

The September Update introduces completely reengineered Pages and Assets panels, unlocking multi-selection, multi-insertion, and bulk actions like drafting, deletion, and more. You can now move and change the paths of multiple Pages in a single go, making it infinitely easier to work with larger websites in Framer. And you now can delete, draft, and un-draft multiple Pages at once. For Assets, multi-selection means keeping your Components, Styles, and Vector Sets organised is now a breeze. Plus,

Build a portfolio website in seconds with wireframer #framer #portfolio #webdesign

Level up your SEO with these awesome Framer Plugins

Level up your site’s visibility with powerful Framer plugins built to supercharge your SEO. From metadata optimization to performance tracking, we’ll walk through the best tools to help your site get discovered faster.Check out our full SEO course on Framer Academy: https://www.framer.com/academy/courses/structure-for-visibility-with-seo-in-framer00:00 Intro00:14 Asset Manager00:34 Search Console01:00 MetaViewer01:26 Semflow01:49 Optiscope SEO02:07 Broken Link Checker02:22 OutroSign up: https://

Framer Update: Text Truncation

Introducing Text Truncation. This new property lets you set a maximum number of lines for any Text Layer, with support for both single and multi-line truncation. This makes it easy to manage dynamic content and keep layouts under control. You can find the new property under the Text menu, and it supports Variables too. Watch the video to see the new layout setups this unlocks. https://framer.com/updates/text-truncationSign up: https://framer.link/ytFollow: https://framer.link/yt-xLearn: https://

Animating between variants on scroll in Framer (Animation Lesson 10)

Component variants are a powerful way to define different states for a single element. With Scroll Variants, we can take that same power and tie it to the scroll position, triggering smooth transitions between component states as visitors move through the page. In this lesson, I’ll show you how to animate between variants based on scroll to create more immersive, story-driven experiences.00:00 Intro00:30 The setup01:45 Creating multiple variants02:32 Adding the Scroll Variant effect03:12 Definin

The truth about serious companies and Framer

Serious brands you know, and ones you’ll come to know already use Framer. Read more about our Series D announcement → https://www.framer.com/blog/series-d/

Meet your Frangel — Switch fast. Ship faster.

We help you switch your company site to Framer. You unlock a new workflow where updates take minutes, not weeks. Learn more at https://www.framer.com/switch/

Creating Parallax with Scroll Speed in Framer (Animation Lesson 9)

If you’ve ever looked out the window of a moving car and noticed that the trees on the side of the road are whizzing by faster than the mountains in the distance, then you’ve observed something called "parallax".It’s a phenomenon we can exploit to make our brains think that things are closer or further away. In this lesson, we’ll use Framer’s Scroll Speed effect to layer elements that move at different speed as the visitor scrolls, creating a sense of three dimensional depth.00:00 Intro00:07 Wha

10 Things to check before launching your Framer site

Before you hit publish, make sure your Framer site is ready to go live. In this video, we’ll cover the 10 essential checks every designer should do—from page titles and metadata to accessibility and performance—to ensure your site launches smoothly and is set up for success.View more courses and tutorials at: https://framer.com/academy00:00 Introduction00:18 Page Titles00:29 Descriptions00:45 URL Slugs01:02 Responsiveness01:15 Image Optimization01:30 Favicon & Social Previews01:42 Basic Accessib

Transforming elements on scroll in Framer (Animation Lesson 8)

Where Scroll Animations allowed us to *trigger* an animation that carried itself out with a pre-defined duration — Scroll Transforms let us translate scrolling into smooth, gradual changes to the position, scale, rotation, and opacity of an element. Transforming elements on scroll lets the visitor drive, bringing a sense of connection between motion and input. It’s a super fun and powerful way to make your site feel more dynamic and reactive. In this lesson, we’ll look at how easy it is to make

Importing from Figma and the Web to Framer (Fundamentals Lesson 14)

In this lesson, we’re going to cover two key tools that can help you move your existing design assets into Framer: the Figma plugin and the HTML browser extension. Whether you’re grabbing pieces of a live site or entire sections from Figma, these tools make it easy to take the hard work you’ve already put in, and quickly move it on over to Framer. Let’s take a look at how each of these tools works.00:00 Intro00:20 Installing the Figma plugin01:36 Selecting and copying layers from Figma03:01 Past

Framer Update: Text Highlights

This release adds new properties to Link Styles, Text Layers, and Text Styles: Fill, Radius, and Padding. Combined, these allow you to make Links that feel like buttons, without needing any wrapping Frames or Stacks, nor Components. We’ve also redesigned the Link Styles UI in the process, making it feel more approachable while actually containing more properties for each interactive state. Plus, these new properties also work on any Text Selection, even if you have Text Styles applied, letting y