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

What is Framer? Join the Community
Return to index
Fredrik Ampler
Posted Nov 15 - Read on Facebook

Great stuff!
What's an easy way to implement a simple parallax effect, e.g moving an imageView at a different scroll speed? E.g like yahoo's weather app.
I haven't been able to figure out the scrollFrame attribute (?), if that has anything to do with it?

15 Comments

Koen Bok

Probably listening to the scroll event of a scroll view and using that to set the x/y position of another view.

Fredrik Ampler

Good, I get the idea. I just don't know how to do it. The only example/documentation on the scroll event that I've found is: "contentView.scrollFrame = {y:0}" (from the "iOS Like View Animating" example). Do you have any pointer on how ?

Koen Bok

Remember that you can apply this principle to any property. Here is another one with an "open door effect" instead: http://framer-example-paralax-door.s3-website-us-east-1.amazonaws.com

Fredrik Ampler

You're the man. Totally. Intrigued by the last example and the webkit transform. It would be good to know which other properties (than x/y) the scrollFrame attribute has? I can't quite seem to grok why we have to listen the scrollFrame.y rather the contentView.y? Anyway, superior help, thank you!

Fredrik Ampler

ouch, turns out this doesn't work on mobile (iOS). Is there any other solution than including a library like stellar.js (jQuery) or skrollr (css)?

Aaron Carámbula

Koen Bok, doesn't framer's scroll view use drag, allowing location tracking while dragging and also on release?

Koen Bok

Yeah the two strategies are 1) hack hack like above, mostly polling the scroll view for it's position or 2) use the custom ui.ScrollView but it's not completely done yet, so you'll miss bouncing into walls until I or someone else finishes it :-)

Aaron Carámbula

Koen what's left? This is something in constantly asked about and the answers are too complicated for new coders.

Koen Bok

So the code is pretty simple to read: https://github.com/koenbok/Framer/blob/master/src/ui/scrollview.coffee

What it has:

- Scrolling with all events
- Snapping to a position (beyond bounds or paging)
- Momentum animation that is customizable

What it misses:

- Momentum animation running out of bounds, or the "bounce" that you see when you flick it and it runs into "the wall"

Craig Murray

Fredrik Ampler , did you ever figure out how to do this effect similar to Yahoo mail app? I'm lost trying to hack this together.

Fredrik Ampler

thank you for asking! No, I'm lost. I'm hoping for a developer friend to look into it as per Koens pointers above.

Craig Murray

OK. Me too. Just curious. I think it's do'able using a couple of other librarys but I'm not sure how to plug that into framer and place nice.

Fredrik Ampler

As far as I understand Koen's pointer it's doable using the "custom ui.ScrollView". But I have no idea how to do that... :)

Read the entire post on Facebook