menu

Framer

Express your creative ideas through interactive design. Join the community for updates, support, resources, and more.

Channels
Team

How do you target a children layer through an override?

August 23, 2019 at 5:49pm

How do you target a children layer through an override?

August 23, 2019 at 5:49pm

I'm trying to hook a header to change based on a scroll layer and want to animate it's child layers as well. How do I do that?

export function Scroll_Progress(props): Override { const Utils = useTransform(scrollY, [0, -200], [80, 24]) return { height: Utils // I want to do something here like props.children[0].opacity: 0 // but it doesn't seem to work } }


August 24, 2019 at 12:05am

There are several ways to achieve this.

The simplest one (and recommended) is to create separate overrides for those child layers you want to animate and pass the scroll position through MotionValue: https://framerbook.com/x/animation/example-animations/#20-scroll-refresh

If you want to dynamically override the children without assigning override to it, you should use React.cloneElement (https://reactjs.org/docs/react-api.html#cloneelement). After passing the props to the children you have to return them inside the 'children' prop to the parent container. Let me know if you need an example of this.

like-fill
1
  • reply
  • like

August 24, 2019 at 12:28pm

Thanks Anton! Yeah, it probably easier to assign separate overrides to child layers, but I will look into the Reac.cloneElement as well. It's handy to know alternatives.

  • reply
  • like

August 26, 2019 at 8:58pm

Here's an example of dynamic children with React.cloneElement. I use overrides to turn the design elements into fully functional sliders. https://www.dropbox.com/s/8c8isfqbpvhxvxs/slider_example.framerx?dl=0

Edited
like-fill
1
  • reply
  • like