Flip Text Cycle Component in Framer

Copy component

Flip Text Cycle Component in Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Component

Flip Text Cycle Component in Framer

This is a Flip Text Cycle effect, recreated in Framer from the amazing V7 Labs website (done by Boldway). It’s a simple and clean way to elegantly cycle through multiple words in a headline, for example. Feel free to remix the project to see how it works, or copy it into your own project to take your website to the next level.

image of Nandi Muzsik
logo of Boldway

Created by

Text graphic saying build Framer sites for template business
Text graphic saying build Framer sites for template business
Text graphic saying build Framer sites for template business

About the resource

This component can be used by all beginners just by copying and pasting it into any Framer project. Thanks to the simple component property structure, customization is simple and easy.

About the resource

This component can be used by all beginners just by copying and pasting it into any Framer project. Thanks to the simple component property structure, customization is simple and easy.

About the resource

This component can be used by all beginners just by copying and pasting it into any Framer project. Thanks to the simple component property structure, customization is simple and easy.

Flip text cycle component settings panel in Framer

Property controls of the Flip Text Cycle component.

Flip text cycle component settings panel in Framer

Property controls of the Flip Text Cycle component.

Flip text cycle component settings panel in Framer

Property controls of the Flip Text Cycle component.

As you can see in the image above, you can change the words you’re cycling through and their colors, as well as the visual effects of their transition, like the delay between cycles, the stagger between letter appearances, and the overall duration of each letter’s appearance.

Quick tip: Use the preview property (yes/no) to play the effect on the canvas without needing to open the actual website. Later on, as you design the rest of the website, it’s a good idea to keep this set to “no” so the effect doesn’t slow down the editor’s performance.

As you can see in the image above, you can change the words you’re cycling through and their colors, as well as the visual effects of their transition, like the delay between cycles, the stagger between letter appearances, and the overall duration of each letter’s appearance.

Quick tip: Use the preview property (yes/no) to play the effect on the canvas without needing to open the actual website. Later on, as you design the rest of the website, it’s a good idea to keep this set to “no” so the effect doesn’t slow down the editor’s performance.

As you can see in the image above, you can change the words you’re cycling through and their colors, as well as the visual effects of their transition, like the delay between cycles, the stagger between letter appearances, and the overall duration of each letter’s appearance.

Quick tip: Use the preview property (yes/no) to play the effect on the canvas without needing to open the actual website. Later on, as you design the rest of the website, it’s a good idea to keep this set to “no” so the effect doesn’t slow down the editor’s performance.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Onboarding folder icon with fifteen PDF files

    Grey Folder Interaction in Framer

    Component

    Onboarding folder icon with fifteen PDF files

    Grey Folder Interaction in Framer

    Component

    Onboarding folder icon with fifteen PDF files

    Grey Folder Interaction in Framer

    Component

  • Stacked card UI design with article preview

    Card Stack Hover Animation in Framer

    Component

    Stacked card UI design with article preview

    Card Stack Hover Animation in Framer

    Component

    Stacked card UI design with article preview

    Card Stack Hover Animation in Framer

    Component