This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Anton Kartashov
Posted Jun 08 - Read on Facebook

I continue to build my scroll prototype with Framer and I have a new problem.

I want to create logotype scaling while scrolling (like at Instagram navigation bar). In Quartz Composer it's easy to connect every object characteristics to Y Position of feed (Carousel example: http://www.youtube.com/watch?v=ervHGmNWRlc). In Framer I found property Layer.scrollY, but I can't figure out what event I need ("Layer.on Scroll ->" doesn't work).

I ask your help!

2 Comments

Josh Puckett

This is pretty easy to do if you're ok having the effect only happen with direct manipulation, that is as you drag up, the logo gets smaller. There, you're just going to map the y delta (so user drags from initY to finalY) of the drag event (start, move, stop) to the scale of the logo.

This is unfortunately harder to do if you want it to work with momentum scrolling, that is you can throw it up and the scaling happens when you're finger isn't down. For this, we need to make a really great custom scrollview that gives us callbacks at every frame for the position of the scroll. By default, Safari only gives you this after the scrolling has stopped, so you don't get any information while it's slowly slowing down, which is a pain.

Anton Kartashov

Josh Puckett Thanks for detailed answer. I got it. Now I think the only direct manipulation would be good enough. I'll try it on week. Thank you very much.

Read the entire post on Facebook