A Visual Designer’s 100 Framer Challenge [004]

“Start Your Journey” Screen Transition

What I Learned from the Challenge[004]:

1. Create States and using the array to organize them.
2. Ripple Effect while tapping the screen

In Challenge[004], I combined the previous two challenges and create the transition between them. (You can find the previous challenges here. Challenge[002] / Challenge[003])

https://framer.cloud/PGfmA

States Array to Organize the Transitions

I was inspired by the prototyping tutorial by Kenny Chen and learned the States Array technique as well as the Ripple Effect from his post.

# --- Add Layers to array, to group the layers belong each state ---
journeyLayers = [
 Journey
 StatBar
 scroll
 Btn_LP
 ROAD_0
 CTA
 PaperPlane
]
# --- Set Initial State ----
for layer in journeyLayers
 layer.states.switchInstant “initial”
Btn_LP.on “click”, ->
 rippleEffect event, this
 for layer in journeyLayers
 layer.states.switch “journey”
 window.clearInterval intervalEffect

The Cubic-bezier curve could be generated from here.

Adding the Milage Count to the parallax

While adding the transition of the two screens, I also updated the parallax page with a mileage calculator. It will reflect the amount of ScrollY and output it into the html attribute of the statusBar.

# As scroll starts, updating the lastYPosition and calculate the distance
scroll.on Events.Scroll, (event) ->
 yDelta = LastPosition — scroll.scrollY
 LastPosition = scroll.scrollY

Link of the Framer Prototype: framer.cloud/PGfmA

I think I have done enough of the Design of Paper Plane flying. Now, I am looking for new concept/idea. If you have anything in mind, please feel free to suggest.

Many many thanks.