Skip to content

Three approaches to work with SVG to create peel off page effect

License

Notifications You must be signed in to change notification settings

dekijovic/PeelOffPageEffect-SnapSvg

Repository files navigation

PeelOffPageEffect-SnapSvg

Three approaches to work with SVG to create peel off page effect

Because I had trouble with browsers compatibility I experimented with all 3 approaches

CSS

  • On page.html page I did the effect using css (animation clip-path @keyframes)
  • It is very easy approach, with css you can do quite a lot for this situation but it's not compatible with older versions of IE and IPhone browser

HTML SVG

  • On page-htmlsvg.html page same effect is done using only HTML SVG
  • Html can be a little trickier to learn but it very powerful, you can do more then css, but still animate tags probably will not work on all older browsers

Snap.svg.js

  • On page-snapsvg.html page same effect I did using Snap.svg.js library
  • Quite easy to learn, similar to jquery, and because it's JS can give you more flexibility

About

Three approaches to work with SVG to create peel off page effect

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published