1

I recently dove into Framer X, Javascript and React and think that something very essential is missing regarding custom transitions between screens (which are just "frames" in Framer).

What I want to achieve is similar to what MengTo is doing in his tutorial (see https://designcode.io/framer-x-animations-overrides), namely creating a custom transition between two screens like the following: Screen A, Screen B

The Problem: Unlike in the tutorial, I don't want the elements of Screen B to also be in the hierarchy of Screen A to achieve the desired effect. Why? Because our designers will always create a separate frame to visualize Screen B.

Overall Goal: Be able to tell each element on Screen A and on Screen B how to animate (i.e. gradually change its properties over time) via the Framer Inspector, when an event occurs (e.g. a button is clicked).

My Approach:

  1. Create generic code overrides that move / resize / fade in etc. the element. For these to be reusable over various projects and to prevent designers from having to code I need the parameters (e.g. target position, target size etc.) to be adjustable in the Inspector -> Question 1: Is it possible to expose parameters of an Override to the Inspector like the PropertyControls do for code components?
  2. Assign several code overrides to the same element and to trigger a different one depending on the event, e.g. have a different code override triggered for "exit" and for the "entry" transition of the Screen -> Question 2: Is it possible to assign more than one code override to an element and trigger each on a differen event?
  3. Nice to have: create a custom code component that uses the children property and place it on Screen A so I can connect it to a corresponding component on Screen B on the Canvas. Then get all properties from the element on Screen B that the two components have in common and use them as target values for the animation. This way the designer won't have to enter all the target values manually. -> Question 3: Can I access these target values in the custom component from a code override.

Question 4: If it is even possible to achieve the desired effect, does this approach make sense? Or is there an existing Framer X library in the Framer shop that already does what I am looking for?

I only need pointers into the right direction, thanks in advance!

Schnodahipfe
  • 55
  • 7

1 Answers1

0

So I have gotten some feedback from the Framer community in their Slack space. Currently with Framer X18 it is not possible to achieve the desired effect.

However I got the following reply from somebody in the Framer team:

This is something brought up within our product team, and is something we'll be introducing soon.

I'll have to see whether this improvement will adress all the mentioned questions / issues.

Schnodahipfe
  • 55
  • 7