Skip to content

A side project for practicing ways of doing parallax and SVG animation

Notifications You must be signed in to change notification settings

Jimmydalecleveland/svg-parallax-fjord

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

43 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SVG Parallax Fjord - Built with React

https://react.parallaxfjord.com/

Some cool things about the project

  • No animation library added for Parallax effects. It uses a simple custom hook to style all parallax layers on the page with a scrollY variable, as well as the background transition.
  • Uses CSS variables from a derived value to accomplish background transition..
    • I have since learned that CSS variables do not perform well when being recalculated, particularly when the element it is declared on has a lot of children. I've switched this to simple js variables that are read on the element for better performance
  • Built for up to 2560px resolution.
  • SVG morphing animations for trees blowing in the wind using snap-svg.

About

A side project for practicing ways of doing parallax and SVG animation

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published