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

What is Framer? Join the Community
Return to index
Aaron Paterson
Posted May 12 - Read on Facebook

Hi everyone,

I'm trying to create a parallax on this iPad page I mocked up in Sketch using the FramerJS: "scroll = new ScrollComponent
scrollHorizontal: false

layerA = new Layer
x: 100

# Modulate the scrolling distance
scroll.on Events.Move, ->
y = Utils.modulate(scroll.scrollY, [0,100], [0,10])
layerA.y = y"
Which is cool. But I want to know how to make it 'the text' to stop at a certain point. i.e. "just before the end of the green panel" See attached http://share.framerjs.com/dblgfjz1j1m2/

20 Comments

Thomas Rekers

Add an if statement. That will stop the title from moving at a certain point.

Trevor Phillippi

http://share.framerjs.com/slx3qef6k3px/ this what you're going for? adds a little logic to track with the scroll view so it looks like the text's baseline is the next section

Aaron Paterson

Yes!

Aaron Paterson

looking at the code…

Aaron Paterson

Ok, so you used an array?

Trevor Phillippi

I think you could probably organize your layers a bit better to make it easier, but given your existing layer structure, what I basically did was:
1) Figure out what the scrollviews scrollY property was when the text is about to exceed the bounds of the green section (623)
2) Add a conditional to stop pushing the text layer down when it hits that magic number
3) Add a variable to store the last scroll position so we can figure out how much the view has moved by doing last-current
4) Add the delta ( a negative value) to the text layer each time the event fires so it moves up vertically in the view as you scroll

Trevor Phillippi

Aaron Paterson

Yeah thanks, I have to organise my files properly but this is my first parallax so quite excited.

Aaron Paterson

this was my inspiration: http://www.xmecompany.com

Aaron Paterson

really cool eh?

Aaron Paterson

I trying to understand and get a scroll effect like this…

Aaron Paterson

that *

Trevor Phillippi

Neat! The second range in the Utils.modulate() function will help you play with the speed and direction of the scroll. In the example you linked, they play with perspective by having the text move in different directions to give the illusion of different z-depths.

Aaron Paterson

hmmm

Aaron Paterson

to play with the speed it's this right

Aaron Paterson

🤔ill have to look that up

Aaron Paterson

Your referring to < 623 ?

Aaron Paterson

I.m having a hard time getting the range to work properly. I have various number combinations, but its' not wrote right. Also I noticed on scroll the 'title something here' jumps to the top suddenly? http://share.framerjs.com/8s6vtnv3iyue/

Trevor Phillippi
Aaron Paterson

yep, sure thing . thanks man.

Read the entire post on Facebook