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

What is Framer? Join the Community
Return to index
Mariusz Mi
Posted Nov 06 - Read on Facebook

Hi,
How can I change page index?
I have three pages and I want animation to skip 2nd page when going from 1st to 3rd.

6 Comments

Jonas Treub

You can animate to a page using the snapToPage function on PageComponent. https://framerjs.com/docs/#page.snapToPage

Mariusz Mi

Thanks Jonas. I'm doing it, but when I click a button on first page which leads to the third one, I have an impression it shows page 2 during animation. I would like have a direct animation from 1 to 3.

Jonas Treub

Thats not possible using the PageComponent by default. You could either reposition the pages so the third one becomes the second, or make all animations custom.

Mariusz Mi

Jonas Treub "Reposition" part is exactly what I'm asking about. I didn't find any function taking care of that.

Jonas Treub

There is no built-in function for that. You'll have to reposition them using the x property.

Jordan Robert Dobson

That's pretty easy though.

# 1) get pages in page component

pages = myPageComponent.content.children

# 1.1) See what we have in pages

print pages

# 2) get page 2

page2 = pages[1]

# 3) get page 3

page3 = pages[2]

HERES TWO WAYS TO REORDER THEM:

# 4.a) get page 2 x position

newPage3posX = page2.x

# 4.a.1) move page 2 to where page 3 is

page2.x = page3.x

# 4.a.2) move page3 to where page 2 used to be

page3.x = newPage3posX

OR.........

# 4.b) simply reorder them using a destructuring assignment

[page2.x, page3.x] = [page3.x, page2.x]

Do this before you call any animations and you should be good.

Read the entire post on Facebook