🗺️ getting Oriented
This lesson covers two core interaction types used inside Framer components: transitions and events.
You will learn how to create transitions to switch between component variants inside the Component Control Centre (CCC). Then you will explore how to use event variables to trigger interactions from the main editor. This lets you link component actions to overlays, navigation, or other logic without detaching anything.
By the end of the lesson, you will have a solid understanding of how both methods work and when to use each.
Learning Outcomes
By the end of this lesson, you’ll be able to:
Create transitions to switch between component variants
Set up triggers like click, appear, and hover inside the CCC
Identify when transitions are limited in the main editor
Define event variables to use as triggers outside the CCC
Trigger overlays, navigation, or page logic using events
Decide when to use a transition and when to use an event
Contents
What is a Transition
Create a Simple Toggle 🏋🏻♂️
Limitations with Transitions
Events: Interaction Variables
Learn How to Use Variables 🏋🏻♂️
Events vs Transitions: What is the Difference
What's a Transition?
Transitions are component interactions configured entirely inside the CCC.
let's say you have a component with multiple VARIANTS configured (i.e. A Toggle with variant 1 = Closed, and variant 2 = open)
TRANSITIONS allow you to define a trigger (Click / Appear / Mouse Enter etc), which when satisfied, causes the component to CHANGE Variants. As always, this is better demonstrated…
👇 Check These out 👇
Get familiar with the following triggers!
On Click
Effect takes place once you've RELEASED the click on your mouse/touchpad/screen.
On Click Start
Effect takes place as soon as you've PRESSED your mouse/trackpad/screen. It does not wait until you've released your finder.
On Appear
Effect takes place as soon as the layer has loaded. It's effectively the 'Layer in View' effect.
Mouse Enter
Effect takes place as the mouse enters its borders.
Mouse Leave
Effect takes place as the mouse EXITS its borders.
Combined with Hover States
Combining interactions with hover/pressed states allows you to create all kinds of effects.
Cycling Transitions
You can also configure elements to automatically cycle through different variants with delays in-between.
🏋🏻♂️ Exercise: Create a simple toggle!
Best way to learn is by doing. So let's get our hands dirty and start playing around with Grid containers.
Instructions:
Turn This…
…Into This 🎯
…using this Guide 🗺️
Demo not appearing?
You can find it here: https://guides.uptrak.io/share/cmbya4wqq000fk007udxlt65o/tour
Limitations with Transitions
Frequently, we'll find ourselves in situations where we want to add custom interactions on a component.
However, components are literally programmed in such a way, that they can't be changed here in the main editor window.
Example!
⛔ Issues with the above!
We can ONLY apply the interaction to TRIGGER on the WHOLE element.
What if we wanted for the event to fire ONLY when someone clicks the little (i) icon in the top right?
Events: Interaction VARIABLES
Like any other variable, EVENTS allow you to create custom interactions on components, so that you don't need to detach and customise your components every time you need to reuse it.
When you're inside the CCC editing any given component, you can define a custom EVENT (Trigger) on any element - just like you would for any other variable.
That event can then be found inside the variable window alongside all the other variables defined for that component.
The interaction appears largely the same as a transition. However with one key difference:
TRIGGER = Click/Mouse IN (whatever you want)
ACTION = Fire the new EVENT Variable.
So, Clicking it fires the EVENT you've specified (in the below example, the event is 01Click).
That 01Click EVENT can now be passed into the main editor window, and used as a TRIGGER for anything you like.
That action may be swapping to another variant, or, initiating some other kind of logic (i.e. open a pop-up overlay)
🏋🏻♂️ Exercise: Let's Learn how to use variables
Instructions:
Turn This…
How does it work?
…Into This 🎯
How does it work?
…using this Guide 🗺️
Demo not appearing?
You can find it here:
https://guides.uptrak.io/share/cmbyhy0ao001pjj071zmyvigm/tour
Events vs Transitions: What's the difference?
Transitions
Transitions are Interactions built and entirely managed inside the Component Control Centre (CCC).
Transitions define how and when a component should swap to a DIFFERENT VARIANT, based on a trigger (like any of those above - i.e. on appear, on click, on mouse enter etc.)
Key Use Cases
Click a card → transition it to an "Expanded" variant
Delay or cycle through multiple variant states
Events
Events are Variables for Interaction!
Event variables let you expose action/event variables (which you've defined inside your component - such as clicking a button) as a usable TRIGGER inside the main canvas (i.e. outside of the Component Control Centre [CCC]).
In other words, they give you the ability to tailor interactions with your component to different pages and different scenarios.
Key Use Cases
This allows you to link internal component logic to things like:
Showing overlays
Navigating between pages
Triggering other components
Running custom page logic