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.

Start for free today

Insert

Layout

Text
CMS

Actions

Invite

Publish

Pages

Layers

Assets

Desktop

Primary

Nav

Hero

Header

Ticker

Clients

Testimonials

Pricing

Footer

Tablet

1199 — 810

Phone

809 — 0

Desktop
Breakpoint

NO CODE

WEBSITES.

・NO CODE・MADE IN FRAMER

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.

No code, full control.

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.

Creative Effects

Enhance your websites instantly: easily add captivating Hover, Press, Loop, and Drag interactions and animations with just a few clicks.

Hover

Drag

drag me

Loop

Press

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.

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.

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

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

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