Midterm – Walking
Link to Live Demo
Inspiration
One day I saw a row of childs crossing the road beside bobst, which inspired me to make a project to depict it.
Animated Sprite Display
At first, I tried to display animation using a sprite sheet, which will accelerate the loading process and make the code more concise. I use TexturePack to pack my frames into one sheet and export as JSON file:
I have problems loading the textures:
I follow the PIXI Animation example to revise the code. The sprites are successfully displayed. However, there’re weird red flashes between frames:
I slow down the animation speed to inspect:
Then I found that it’s because I have to upgrade my texturePack account to pro and pay money for exportation. Really frustrated by the app… I decided to use the traditional way to display animation and it works fine:
Motion Path
I decide to use the GSAP motion path plugin to create a path for the sprites. At first, I tried to directly integrate the
Drawing a bezier Curve for testing:
I then add delay to each sprite to make them follow each other:
When I try to add points to the path points’ array, the sprites stuck at the beginning of the curve and stop moving:
I found that it was because I use the “cubic” type, which describes specifically the cubic-bezier and has a limited coordinate number. I use “curviness” and the sprite resume movements:
Then, I create three kids animations in Procreate and load them on the website:
I noticed that the kids didn’t rotate according to the path, which seems very strange. I use “autoRotate” in the Motion path options to add rotation. But the sprites spin around crazily:
I try to use the curviness option, add align and rotate origin options, as well as change the curve’s shape, but none of them solve the problem.
After tons of search online, I finally found the solution: add “useRadians: true” in the MotionPath option:
Dynamic motion path shape experiment
Scroll trigger animation
Credits & Tools