Gradient

EFFECTS

Bring your site to life without code.

Easily design expressive animations. Add effects with a few clicks and capture your audience’s attention when they land on your website.

Insert

Layout

Frame

Text
CMS
Memoji
Memoji

Invite

Publish

Pages

Layers

Assets

Desktop

Primary

Nav

Hero

Header

Ticker

Clients

Testimonials

Pricing

Footer

Tablet

1199 — 810

Phone

809 — 0

Enter Effect

Opacity

1

Scale

0.8

Rotate

10

Offset X
0
Offset Y

40

Rotate X

0

Rotate Y

0

Transition

Spring

Desktop
Breakpoint

NO CODE

WEBSITES.

✦ NO CODE DYNAMIC WEBSITES

Position

400

T

400

B

600

L

600

R
Position

Type

Absolute

Size

Width

100

Fixed

Height

100

Fixed

Layout

Effects

Styles

Opacity
1
Visible
True
False
Radius
0

Overflow

Hidden

Fill

Add…

Border
Add…
Shadows
Add…

Link

Effects

Overlays

Scroll Section

Accessibility

No code, full control.

Powerful layouts, simple design tools.

Use powerful Scroll and Appear effects like Transforms and Parallax scrolling to bring your website to life and make it stand out among the crowd.

Use powerful Scroll and Appear effects like Transforms and Parallax scrolling to bring your website to life and make it stand out among the crowd.

Appear Animations

Animate layers when the page is loaded to grab your visitor’s attention.

Scroll Animations

Animate layers when they scroll into view or use any other layer on your page as a trigger.

Scroll Speed

Create the parallax depth effect by giving layers different scroll speeds.

SCROLL

SCROLL

Interactive Components

Create interactive components that can animate between variants, such as hover and pressed.

3D render

2023

Zodiac

Scroll Variants

Animate between Component Variants as you reach a specific scroll position.

Examples

Add Custom made Components to your site, such as globes and animating text.

Appear Animation

Appear Effects allows you to animate any layer as the page is loading. Additionally, this feature allows for easy customization of the animation effects, so you can create animations that match the look and feel of your website.

Appear Effects allows you to animate any layer as the page is loading. Additionally, this feature allows for easy customization of the animation effects, so you can create animations that match the look and feel of your website.

Appear Effects allows you to animate any layer as the page is loading. Additionally, this feature allows for easy customization of the animation effects, so you can create animations that match the look and feel of your website.

gradient
gradient
gradient

Scroll Animation

Create engaging and dynamic animations triggered as users scroll through your page, bringing elements to life and keeping users engaged. You can make layers animate when they scroll into view or trigger the animation when another layer enters the viewport. You can tweak transitions for when the layer enters the viewport and when it exits separately. You can also control the scroll position, creating unique experiences, such as parallax scrolling, providing a more immersive user experience.

gradient
gradient
gradient

Scroll Speed

Scroll Speed Effects allow you to define the scrolling speed of any given layer related to the default page scroll. To create parallax and reveal effects, you can make the selected layer scroll slightly faster or slower than your other layers.

SCROLL

gradient
gradient
gradient

Scroll Variant

Scroll Variants allows you to change the active variant of a component on sections on your page entering the viewport.

You can use Scroll Variants to make a navigation bar change its appearance as the user scrolls down the page, such as changing its background color or adjusting the positioning of elements. Or a sidebar highlighting the active sections as you scroll down the page.

Desktop
gradient
gradient
gradient

Components

Components allow you to create visual transitions between different component variants. Framer allows you to set up hover and pressed states easily and build your own custom transitions using appear triggers and delays.

3D render

2023

Zodiac

gradient
gradient
gradient

Design & Layout

Design flexible layouts, faster on a familiar free-form canvas.

Navigation

Move between different pages or sections of the site.

CMS

Manage content for a blog posts, job listings, or marketing pages.

Site Management

Manage website settings like passwords and custom domains.

SEO & Performance

Manage content for a blog posts, job listings, or marketing pages.