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

What is Framer? Join the Community
Return to index
Chris Camargo
Posted May 04 - Read on Facebook

Having difficulty with snapToPage and the PageComponent:
http://share.framerjs.com/3c2w9yyesnkz/

On line 140 in app.coffee, I assign a click event listener to each of my "tabs" in the PageComponent. If the PageComponent isn't scrolling when one of those tabs is clicked, I tell the PageComponent to snap to it. For some reason, snapToPage isn't working here when animation is enabled, but it WILL work if I set the animate boolean to false.

What am I doing wrong here?

12 Comments

Chris Camargo

Setting that boolean in the second-to-last line to "false" makes the snapToPage effect work, but it won't work when it's set to "true".

Chris Camargo

Koen Bok, Benjamin Den Boer, any thoughts on this one? Is this a bug with PageComponent, or am I doing something crazy here?

Chris Camargo

I've simplified the problem even further, pulled it out of the class, eliminated the iterator, and manually created each layer. I can't get snapToPage working WITH animation when an event fires from the PageComponent itself. It works when I attach the listener to another layer, but not when hooking to the PageComponent, or its contents.

http://share.framerjs.com/b3u0h8gcc2dw/

Chris Camargo

[UPDATE: Spoke too soon. The workaround below works for desktop, but doesn't solve the problem on mobile.]

To anyone following this issue, I was able to work around the problem, and get my snapToPage() calls working, by using "click" instead of Events.Click. Not sure why this is the case, but there it is. http://share.framerjs.com/s94qkduxaw59/

Tisho Georgiev

I wrote this in the Slack room, too, but here it is again:

What happens is that snapToPage is getting called twice. once from the implementation of the page component, and once by you.

The order of those calls, however, is important. Your call to snapToPage fires first, and asks the page component to snap to the page you clicked on. Then the scrollEnd handler from the page component implementation fires, which checks if there’s been some movement (i.e. the page component was scrolled), and since there’s no movement in a single click, it calls snapToPage with the currently-displayed page.

So if you have page 1 and page 2, and you’re currently on page 1, when you click on page 2, your call correctly tells the page component to go to page 2, but the page component’s implementation tells itself to go back to page 1 and no animation is performed.

You can work around this by having your call fire last. A quick way to do that is to do `Utils.delay 0, => @carouselScroller.snapToPage(layer, true)`

Koen, the `_scrollEnd` handler in PageComponent should check if the currentPage has changed underneath it before it tries to call `snapToPage` when the velocity threshold isn't met.

Koen Bok

I think someone just made a pr for this.

Chris Camargo

Tisho, you are my hero.

Charlie Sneath

Tisho Georgiev Thanks for the fix using delay. When this is updated, would you expect it to work without the delay?

Tisho Georgiev

Yes.

Koen Bok

Yes yes. I'm on it.

Charlie Sneath

You guys rock.

Gerardo Caderas

You saved me.

Read the entire post on Facebook