A Visual Designer’s 100 Framer Challenge [003]
Start Your Journey” Parallax Effect
What I Learned from the Challenge[003]:
- ScrollComponent, content, and scrollY.
- Parallax Effect based on the scrollY.
Continue with the concept of Challenge[002], I want to create a scroll-based interaction of the Paper Plane. In addition, using the parallax skill to add more layers of depth to the visual.
Plan the Relations between Layers.
First, I took the examples on framer.com (examples.framerjs.com/#scrolling-parallax.framer) which has a great Touch-based parallax example. All I need to to is to swap the Touch-based event to Scroll-based.
In order to plan out the layers relation, I draw a diagram below.The layers that further behind the base layer should move slower than the base layer, and vice versa.
ScrollComponent & Setup the Base Layer
I started the prototype with a new ScrollCompoennt the same size as the device screen and deducted the height of the status bar which will be added later.
Then creating a new layer called scrollBase, which will be used to calculate the positionY of each layer, serving as the substitute of Touch Event in the framer.com example.
Note that I set the height of scrollBase a relative number of the length of the ScrollComponent. So that we can control how many “Scrolls” would happen. The content’s [draggable.overdray] is disabled.
scroll = new ScrollComponent
width: Framer.Device.screen.width
height: (Framer.Device.screen.height)-160
scrollHorizontal: false
scroll.mouseWheelEnabled = true
scroll.content.draggable.overdrag = false# Create a NULL scroll Layer as the calculation base.
scrollBase = new Layer
height: (scroll.height)*6.5
width: scroll.width
backgroundColor: null
scrollBase.parent = scroll.content
Calculate the scrollY and the difference
Within the ScrollComponent, there is a ScrollPosition method that could be used to calculate how much distance has been scrolled, which is what I used to substitute the [event.y] variable from the freamer.com example
# Store the y position of the last scroll position of scrollBase
LastPosition = 0# Record the y position while scroll
scroll.on Events.ScrollStart, (event) ->
LastPosition = scroll.scrollY
# As scroll starts, updating the lastYPosition and calculate the distance
scroll.on Events.Scroll, (event) ->
yDelta = LastPosition — scroll.scrollY
LastPosition = scroll.scrollYprint LastPosition, yDelta
At this step, we get the real-time attribute of LastPosition and yDelta. A good way to examine if this function works is to use [print] method to get the result of LastPositon and yDelta while you scroll.
Applied the factors to each layer
The last step is to apply the yDelta to each layer and to time the relative factors that was noted in the diagram. This factor will also determine the length of the asset when I created them in Sketch.
# The functions are wrapped within the [scroll.on Events.Scroll ->] CLOUD_Top.y -= yDelta*1.1
CLOUD.y -= yDelta*0.6
Ground.y -= yDelta*0.3
After the parallax applies, there might be some tiny twist needed in order to achieve the best visual result. Such as the initial position of each layer, the speed factor, etc.
Link of the Prototype: https://framer.cloud/efvHB
*Something to try and refine when revisiting the project:
For now, the scrolling is finished, and is controlled by the length of the scrollBase layer.
- To create an infinite scrolling experience.
- Adding some ending visual / interaction to indicate the end of the scrolling. A feedback of hitting the end of scrolling.
Let me know if you have any questions, suggests, or some tricks that could make this even better! Thank you ahead!
