Collection of hand-picked free HTML and CSS page transition effect code examples from Codepen, GitHub and other resources. Update of February 2020 collection. 2 new items.
Links
Made with
- HTML / CSS
About a code
transform: translate
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Haml) / CSS (SCSS)
About a code
Just another CSS UI
Just another CSS UI with page transition.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML (Pug) / CSS (Stylus) / JavaScript
About the code
Multi Layer Page Reveal Effect
Multi layer page reveal effect in HTML, CSS and JavaScript.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS) / JavaScript
About the code
Tiles Page Transition
Tiles page transition in HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: bootstrap.css
Links
Made with
- HTML / CSS (SCSS) / JavaScript
About the code
Article Transition Page
Article transition page in HTML, CSS and JS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML/Pug
- CSS/SCSS
- JavaScript (vue.js)
About the code
Page Transition
Simple page transition.
Fullscreen Layout Page Transitions
Page transitions with HTML, CSS and JavaScript.
Made by Marcelo Ribeiro
June 19, 2017
React Animated Page Transitions
Just a small demo to show a few page transitions in React. Using GreenSock and SVG.
Made by Sarah Drasner
May 1, 2017
Links
Made with
- HTML
- CSS
- JavaScript (jquery.js)
About the code
Reveal Content Animation
Reveal content animation and menu.
Transitions
Easy css page transitions.
Made by Filipp
March 3, 2017
Expanding Card Page Transition Effect
That thing where the card expands into the background, no libraries, commented. Please note: this code is in no way ready to be used as is in production on your website. It will need to be adapted to be cross browser compliant & accessible.
Made by Rachel Smith
February 10, 2017
Cubic Bezier Page Transition
GSAP Cubic bezier page transition.
Made by Maciej Siwanowicz
February 2, 2017
Links
Made with
- HTML / CSS
About a code
Page Transitions
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML
- CSS/Less
- JavaScript (jquery.js, tweenmax.js)
About the code
Simple CSS3 Page Transition
A simple and performant CSS3 page transition.
Vue2 Page Transitions With GSAP
Some default Vue2 page transitions.
Made by Tim Rijkse
November 4, 2016
Links
Made with
- HTML
- CSS/Less
- JavaScript (angular.js)
About the code
Page Transition
Seamless transition from thumbnail grid to fullscreen page. Using CSS animations and Angular 1.5.
Links
Made with
- HTML / CSS (SCSS)
About a code
Splash Page
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Easy CSS Page/Slide Transitions
Super easy slider/page transitions.
Made by Jamie Coulter
December 31, 2015
Page Transition With Loader
Page transition with loader in HTML, CSS and JavaScript.
Made by John Heiner
June 12, 2015
Page Transitions
Page transitions with HTML, CSS and JavaScript.
Made by Romswell Roswell Parian Paucar
May 22, 2015
Page Transition Loader
New page preloader concept. SVG circle loader with morphing effect. Responsive animated wireframe.
Made by Arsen Zbidniakov
April 17, 2015
SVG Path Pagination And Rotating Page Transition
Have a lot of hardcoded numbers. Under any circumstances don't look into js section.
Made by Nikolay Talanov
February 3, 2015
Material Design Transition
Click any link in this block of text to load another set of text. The links don't go anywhere yet. They are just hooks to allow you to click somewhere.
The style and animation is entirely CSS so it is smooth. JavaScript is used to add classes at the right time. It also pauses to wait for the content to be replaced, and calculates where to centre the hole. There are two stages to the animation. When a link is clicked the border-width grows very large.
Made by David Marland
October 20, 2014
Kontext
A context-shift transition inspired by iOS.
Made by Hakim El Hattab
February 26, 2013