A Visual Designer’s 100 Framer Challenge [002]

“Start Your Journey” Landing Animation

What I learned from the challenge[002]:

1. For loop to create a series of objects/items.
2. Infinite Looping Animation.
3. Using randomNumber to break the pattern. (And add a little SURPRISE.)

Link of the Prototype: https://framer.cloud/OTRnH

The second challenge is an animated landing page of my beloved paper plane. First of all, the below part might look confusing for now, but it will then make sense for the upcoming challenge[003] since they are the preparation for the next screen.

# Hide the Landing Paper Plane, Move the Key Paper Plane from Journey to Device Screen. 
PaperPlane1.visible = 0
PaperPlane.parent = Framer.Device.screen
PaperPlane.y = Align.center(-100)
PaperPlane.scaleY = (300/560)
# Framer Coded The Button
Btn_Start.visible = 0
Btn_LP = new Layer
 width: 540
 height: 140
 borderRadius: 80
 borderWidth: 4
 borderColor: “#FFF”
 backgroundColor: “#26A65B”
 x: Align.center
 y: Align.bottom(-360)
CTA.superLayer = Btn_LP
CTA.center()

For Loop Function and Infinite Loop Animation

I want to use the optical illusion to create a video-game-like animation. In that case, I will need a group of lines on the road. Instead of creating them in Sketch and exporting to Framer, I tried to use the for loop function so that I could have more control over the lines.

for i in [1…10]
 RoadBlock = new Layer
 superLayer: RoadBlockWrap
 backgroundColor: “#519CA2”
 x: Align.center
 width: 24
 height: (1334/6)
 y: ((i-1)*1334/6) + (i-1)*100

Using the for loop to create the line on the road.

The infinite loop is created by two separate animations. roadAnimateA and roadAnimateB. By chaining the two animations together using [Layer.onanimationEnd ->], the infinite loop move the lines backward as the paper plane flies forward.

roadAnimateA.start()
roadAnimateA.onAnimationEnd ->
 roadAnimateB.start()
roadAnimateB.onAnimationEnd ->
 roadAnimateA.start()

*Something to try and refine when revisiting the project:
The shape of the lines does not show the proper perspective. The lines in the further back should be shorter and thinner. I am still trying to figure out the math to animate it smoothly, when taking the length and size into consideration.

Interval Function and Random Number

“Life is nothing without a little chaos to make it interesting.”

https://framer.cloud/OTRnH

While a paper plane is flying, it doesn’t fly still. It might sometimes go fast or slow, it might rise or sometimes descend. In order to capture that movement, I use [Utils.randomNumber] to give 2 arbitrary, but constraint, factors to control the positionX and the Scale of the paper plane.

(Note that the position factor is limited between 1 and negative 1, while the scale factor is within 0.5 to 1.)

 flyFactorX = Utils.randomNumber -1, 1
 flyFactorS = Utils.randomNumber 0.5, 1

To keep feeding the random factors into the Object, I used Utils.interval to trigger the function every 2 sec.

Utils.interval 2, ->
 flyAnimate = new Animation PaperPlane,
 x: Align.center(flyFactorX * 200)
 scale: flyFactorS
 options:
 curve: “ease-in-out”
 time: 2
 
 flyAnimate.start() 

*Something to try and polish when revisiting the project:
For now the two movements seems very disjointed. It could be improved by…

1. Adding a corresponding shadow of the plane (position and scale)
2. Tilting the plane with rotationZ and corresponding to the moving direction.
3. Or Tilting the plane along X axis corresponding to the scale.

Thanks to everyone who encouraged me and provided any feedback or suggestion. I am so inspired by this community.

Challenge NO.2 done. 98 to go!