Code
Interactive Tools
Code Override
Framer X

Link to another overlay from an overlay (Attempt 1)

Overview

I’ve made an overlay link. From that overlay, I want to link to another overlay but stay at the same parent page. So basically open an overlay, click on a link to close the overlay and open another overlay.

Ideally, if we could invoke navigation links in a code override, we could easily implement this. Unfortunately I haven’t found any way to do it yet.

Here’s a way to simulate the desired effect using a navigation link and the Page tool. It’s not exactly what’s requested, but hopefully it’s useful too.

Also, See this tip for another approach that uses animations in code override for a closer simulation.

Key steps

  1. Link to a frame and set the transition to “Overlay”
  2. Put a Page into the linked frame
  3. Connect the page to the desired blue and purple overlays
  4. Use code overrides to switch between two pages

The Page component has a currentPage prop that can be set via Code Override.

export const CurrentPage: Override = () => {
  return {
    currentPage: data.currentPage
  };
};

Conclusion

Pros

  • Easy implementation, just drag&drop and add a few lines of code

Cons

  • Not exactly the requested effect

PS: If you find this tip difficult to understand, check out this course I prepared for you, where concepts are explained in a more digestible way. No programming experience required!

PPS: See other pro tips, or share / request a new tip.


download Want the complete source file? Enter your email address below:

I'll also send you new tips when available. No spam, unsubscribe any time!


© 2018 jimu Labs, Inc.