If you were browsing the web circa 1998, splash pages were everywhere. Flash-powered intros with dramatic music, spinning logos, and “Welcome to our website!” animations were a standard part of the design process. Those days are long gone, but they haven't vanished entirely. Brands still use splash pages for age verification, country and language selection, or simply to create a bold first impression.
Setting Up the Project
We need a basic project setup with a toggle with two states: Off and On. We'll use overrides to connect these toggles and update the price and toggled state. We select the three toggles and add a new file with a new Override.
Creating Overrides in Framer
There are a few simple steps to set up an override. First, we need a store to keep track of a specific value. In our case, that's a boolean called yearly. When we toggle one of the pricing cards, the value updates, and the price and toggles all go to the right state based on this boolean.
Next, we write a withToggle override that receives a Component from the canvas and returns a React component with the canvas component that was passed in and updated props. In this case, we are just returning the props that we already get from Framer. If we apply this override, it won't do anything yet.
Updating the Variant
To make the override work, we need to set the variant based on the current value in our store and update the value whenever we click our components. We write a logic for setting the right variant and an onClick handler that sets the store to whatever the opposite of its current value is.
We can also update any other property that components have, for example, their text. Whenever we click the component, we can update the text to reflect the yearly or monthly prices.
Building Cool Synced Pricing Cards
With these two techniques, we can build synced pricing cards that animate between two numbers. We can set the number on the canvas as properties; whenever we toggle these, there's a nice transition between the two.
If we want, we can do some fetching and show localized prices for our products while still using the power of animations inside components.
Conclusion
Overrides in Framer are powerful features that allow you to modify and control components at runtime. We've explored how to use overrides to create synced pricing cards that update the price and toggled state whenever you toggle one of the cards. If you want to check out how this is built, click the remix link and open the project to play around.
Step into the future of design
Join thousands using Framer to build high-performing websites fast.
