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

What is Framer? Join the Community
Return to index
Michael Bing
Posted May 11 - Read on Facebook

Hi all

Me and my Co. worker are getting slightly frustrated with something on paper should be fairly "easy", but maybe we are doing something wrong?.

This is not our code, but a code, to demonstrate what we are after.

# Set background
bg = new BackgroundLayer backgroundColor: "grey"

# Create PageComponent
page = new PageComponent
width: 2048, height: 579
scrollVertical: false

# Create 10 pages
alllayers = for i in [0..7]
project = new Layer({
width: 325, height: 579
x: (465 * i)
backgroundColor: "#fff"
superLayer: page.content

alllayers[1].on Events.Click, ->
properties: {scale: 1.2}

The effect i am looking for is this. You can click any of the projects, and on click, the "active" project, scales up. At the same time, all the "inactive" projects scales down. This requires prob. two layers for it to work, but we simply can't make it happen, without some odd behaviour. So question is, is this even possible with Framer?



Koen Bok

Your main error was that the page component is way larger than the screen. I made you an example:

Michael Bing

Koen Bok Ah sorry, i see i missed a thing in my description (ups). Yes i know, but what i was missing was that the inactive projects (all of them as a group), should scale & fade out at the same time, at the same time as the "active" one is scaling up.

So once "active" project is scaling up, the rest will scale / fade down as a group.


Koen Bok

Ah, sure, sure project.on Events.AnimationEnd, -> ...

Michael Bing

Koen Bok sry for late reply.... eating :) thing is, i got it to work for individual scaling, but the effect i am looking for is all the inactive projects to scale down as a group, not individually. And this is what has me in troubles :)

Hope you understand what i mean.

Read the entire post on Facebook