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

What is Framer? Join the Community
Return to index
Duncan Crozier
Posted May 18 - Read on Facebook

Hi folks, I'm a little stuck figuring out a scroll problem.
I have a scroll component (height:1702) with scroll content (height:1820), I have an animation that increases a cards height and need the scroll content to match and set the new bottom of the scrollable content. For some reason it remains at the original top and bottom points. Plus I need the content to scroll to point in order to bring focus on the extended card.
Here's the code I have so far:
cardAnimation = () ->
properties: {width:1008, height:1280}
properties: {height:4000}
openScrollContainer.scrollToPoint({x:0, y:1280}, true, {curve:"ease"})

Any ideas? Thanks in advance.


Benjamin Den Boer

Hey Duncan Crozier - hmm, looking at your code it may be that you're calling the updateContent() method while your card animation hasn't finished yet. So it's re-calculating the height before it actually changed. The Swipe 'n Scroll prototype I made a couple of weeks ago may also be helpful to you: it also involves updating the content of a scrollable list of cards (which you can swipe-to-delete):

Otherwise, if you could share the example with I'd be happy to take a look.

Duncan Crozier

Hi Benjamin Den Boer - thanks for the info, I'll add a delay to see if it solves it. Also, I can't post a share at the moment as against company policy but I could knock up a loose prototype focusing on the problem area. Thanks again!

Benjamin Den Boer

I understand. Hope it works! Also, using the AnimationEnd event instead of a delay may be a more flexible solution if you're considering using spring curves without a set time. :-)

Duncan Crozier

You we're correct Benjamin Den Boer - it was trying to updateContent before the card animation had ended. I can't add an AnimationEnd as the cards animates in 3 stages, so the Utils.delay will do for the moment ;)
Thanks again for the help!

Read the entire post on Facebook