Supply

Components

Remixes

Templates

Log in

Premium

Supply

Components

Remixes

Templates

Code components & overrides

Code components

& overrides

Unlock the best in Framer with our collection of free and premium code components and overrides, curated to enhance your designs.

USA:

Current Weather

Show current weather data for any set location.

USA:

Current Weather

Show current weather data for any set location.

Progressive blur

The famous progressive blur that Apple uses throughout various parts in iOS.

Progressive blur

The famous progressive blur that Apple uses throughout various parts in iOS.

Hover me

Hover me

Magnetic hover

Add a magnetic hover effect like on iPad OS. Easy to adjust values in code.

Hover me

Hover me

Magnetic hover

Add a magnetic hover effect like on iPad OS. Easy to adjust values in code.

Gradient ease

Remove that ugly edge at the end of your gradient and have a smooth ease in.

Gradient ease

Remove that ugly edge at the end of your gradient and have a smooth ease in.

Clock + date

Show time and date for any set timezone. Multiple customization options.

Clock + date

Show time and date for any set timezone. Multiple customization options.

Rnadom Variant

Randomly displays the connected frames on each page load.

Rnadom Variant

Randomly displays the connected frames on each page load.

Analog Clock

Display the time in a classic & timeless way. Hands up, hands moving.

Analog Clock

Display the time in a classic & timeless way. Hands up, hands moving.

Uploaded image

Fade it

Fade out any frame or image with multiple easing types of masks.

Uploaded image

Fade it

Fade out any frame or image with multiple easing types of masks.

© 2024 Eleveight™

Auto copyright

Updates the copyright statement year in your footer automatically.

© 2024 Eleveight™

Auto copyright

Updates the copyright statement year in your footer automatically.

Image flip

Simple override that allows images to be flipped horizontally or vertically.

Image flip

Simple override that allows images to be flipped horizontally or vertically.

Scroll to top

Transform any frame to a smooth scroll to top action.

Scroll to top

Transform any frame to a smooth scroll to top action.

Premium collection

0

Animated counter

Animate your numbers with a start & end value and multiple customization options.

0

Animated counter

Animate your numbers with a start & end value and multiple customization options.

Image trail

Smooth trail of custom set images that follows your mouse cursor.

Image trail

Smooth trail of custom set images that follows your mouse cursor.

Variable fonts

Choose from over 75 fonts and get these variable weights popping.

Variable fonts

Choose from over 75 fonts and get these variable weights popping.

Updated: ago
Updated: ago

Time Since

Displays the time passed since a chosen starting date.

Updated: ago

Time Since

Displays the time passed since a chosen starting date.

Make it 
count
 😎

Word Switch

Display a series of words that smoothly transition between each other.

Make it 
count
 😎

Word Switch

Display a series of words that smoothly transition between each other.

$
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
$
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9

Smooth counter

Number ounter that smoothly scrolls from a start to an end value.

$
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9

Smooth counter

Number ounter that smoothly scrolls from a start to an end value.

Cover
SOSO
Omah Lay (JOSEPH Afro House Remix)
0:00

Audio Player

Fully functional and customizable audio player with volume controls.

Cover
SOSO
Omah Lay (JOSEPH Afro House Remix)
0:00

Audio Player

Fully functional and customizable audio player with volume controls.

Fancy button

Frame beam

Adds an animated border outline to any connected frame. This is fully responsive.

Fancy button

Frame beam

Adds an animated border outline to any connected frame. This is fully responsive.

3D Hover & tilt

Turn any frame or image into a 3D card which tilts on hover smoothly.

3D Hover & tilt

Turn any frame or image into a 3D card which tilts on hover smoothly.

🎉

Tap me

Confetti

Play beautiful confetti on button press or page load. Advanced customization.

🎉

Tap me

Confetti

Play beautiful confetti on button press or page load. Advanced customization.

Before & After

Advanced before & after slider with multiple customization options.

Before & After

Advanced before & after slider with multiple customization options.

am i scrambled?

Scrambled text

Scramble text to create a cool effect while choosing your own style, subtle or all in.

am i scrambled?

Scrambled text

Scramble text to create a cool effect while choosing your own style, subtle or all in.

The most advanced text truncate Framer code component

Text Truncate

Multiple customization options, fully responsive and uses framer motion.

The most advanced text truncate Framer code component

Text Truncate

Multiple customization options, fully responsive and uses framer motion.

Depth
Depth
Outline
Outline

Depth + outline

Outline or 3D depth any text. Endless customization possibilities.

Depth
Outline

Depth + outline

Outline or 3D depth any text. Endless customization possibilities.

Hover Zoom

Hover to zoom on any image. It comes with 3 predefined zoom styles.

Hover Zoom

Hover to zoom on any image. It comes with 3 predefined zoom styles.

NEW

3D Elements

Coming soon

NEW

3D Elements

Download

NEW

NEW

3D Elements

Coming soon

NEW

3D Elements

Download

NEW

After Date

Show, switch or hide any frame or component by a set date and time.

NEW

3D Elements

Coming soon

NEW

3D Elements

Download

NEW

After Date

Show, switch or hide any frame or component by a set date and time.

01

02

03

01

02

03

Scroll Snap

Add scroll snapping sections. Works both for vertical and horizontal scrolling.

01

02

03

Scroll Snap

Add scroll snapping sections. Works both for vertical and horizontal scrolling.

SVG mask + text

Choose any svg or text and use it as a mask on any image of your choice.

SVG mask + text

Choose any svg or text and use it as a mask on any image of your choice.

Code Overrides

In Framer, "code overrides" refer to a powerful feature that allows users to modify the behavior and properties of visual elements or components directly through code.

Benefits of Using Code Overrides


  • Enhanced Interactivity: Code overrides provide a layer of interactivity that can make prototypes feel more like the final application.


  • Custom Animations: They allow for custom animations and transitions that are not limited to what is available in the GUI.


Scroll Edge Fade

Fade out the container edges upon scrolling. Both horizontally or vertically.

Code Overrides

In Framer, "code overrides" refer to a powerful feature that allows users to modify the behavior and properties of visual elements or components directly through code.

Benefits of Using Code Overrides


  • Enhanced Interactivity: Code overrides provide a layer of interactivity that can make prototypes feel more like the final application.


  • Custom Animations: They allow for custom animations and transitions that are not limited to what is available in the GUI.


Scroll Edge Fade

Fade out the container edges upon scrolling. Both horizontally or vertically.

Negative Gap

Connect multiple frames and set a negative gap between them.

Negative Gap

Connect multiple frames and set a negative gap between them.

Edge Glow

Add a hover glow to the edges or the entire area of any frame.

Edge Glow

Add a hover glow to the edges or the entire area of any frame.

Scroll Word Reveal

Dynamically reveal words in a phrase based on user's scroll position.

Scroll Word Reveal

Dynamically reveal words in a phrase based on user's scroll position.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Display Grid

Multiple grid layout patterns, super customizable and fully responsive.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Display Grid

Multiple grid layout patterns, super customizable and fully responsive.

FAQ

Eleveight Supply

Why should I use this component?

First of all because it won't break the fluid motion when expanding and collapsing. The way Framer uses motion inside the dom is by transform and scale, so if you won't wrap everything on the page in one huge component (which applies motion to all emenents) it will break the motion.

How does this component fix the issue?

We found a work-around using the capabilities of JS and other little tricks and the result is having all other sections and components on the page wrap around animating smoothly all together.

Is it hard to set-up?

Absolutely not. In fact is a lot faster than having to design it manually in Framer. You can get your FAQ section with this component in a matter of seconds.

Set-up your faq in seconds

Setting up your faq has never been easier. On top of that it's also smooth and fully adjustable and responsive without breaking the animation.

FAQ

Create FAQs in seconds, while keeping fluid motion on all elements around.

FAQ

Eleveight Supply

Why should I use this component?

First of all because it won't break the fluid motion when expanding and collapsing. The way Framer uses motion inside the dom is by transform and scale, so if you won't wrap everything on the page in one huge component (which applies motion to all emenents) it will break the motion.

How does this component fix the issue?

We found a work-around using the capabilities of JS and other little tricks and the result is having all other sections and components on the page wrap around animating smoothly all together.

Is it hard to set-up?

Absolutely not. In fact is a lot faster than having to design it manually in Framer. You can get your FAQ section with this component in a matter of seconds.

Set-up your faq in seconds

Setting up your faq has never been easier. On top of that it's also smooth and fully adjustable and responsive without breaking the animation.

FAQ

Create FAQs in seconds, while keeping fluid motion on all elements around.

Scroll Progress

Indicates scroll progress on a page in a nice visual way.

Scroll Progress

Indicates scroll progress on a page in a nice visual way.

CMS Formatted text field

This is a formatted text paragraph linked to a CMS collection with the component applied. You can see the images take up the full width of the container and have corner radius applied.

CMS Images style

Style width and radius on formatted text images inside your CMS collection.

CMS Formatted text field

This is a formatted text paragraph linked to a CMS collection with the component applied. You can see the images take up the full width of the container and have corner radius applied.

CMS Images style

Style width and radius on formatted text images inside your CMS collection.

Previous page

Back button

Convert any frame to a back button which goes to previous page.

Previous page

Back button

Convert any frame to a back button which goes to previous page.

We're cooking

More premium components being added.

Get notified

Stay updated with the newest additions to our digital assets library, upcoming promotions or discounts.

Index

Components

Remixes

Templates

Premium

Guides

Legal

Terms & conditions

Privacy Policy

Cookies

A product by

Studio

made by Fabian Albert.

© 2024 - Eleveight Supply™

Follow us on x.com

Say hello: sales@eleveight.supply

Get notified

Stay updated with the newest additions to our digital assets library, upcoming promotions or discounts.

Index

Components

Remixes

Templates

Premium

Guides

Legal

Terms & conditions

Privacy Policy

Cookies

A product by

Studio

made by Fabian Albert.

Follow us on x.com

Say hello: sales@eleveight.supply

© 2024 - Eleveight Supply™

Get notified

Stay updated with the newest additions to our digital assets library, upcoming promotions or discounts.

Index

Components

Remixes

Templates

Premium

Guides

Legal

Terms & conditions

Privacy Policy

Cookies

A product by

Studio

made by Fabian Albert.

© 2024 - Eleveight Supply™

Follow us on x.com

Say hello: sales@eleveight.supply