20 Nice CSS & JavaScript Page Transitions Effects For Web Developers.

With more and more competition rising in the internet world, the need to be a step ahead and unleash the innovative side is more than ever. This in mind, a lot of site owners have now adapted to adding CSS page transitions to keep things interesting.

1.TRANSFORM: TRANSLATE

Made with

1
2
Html
Css/SCSS

Author

1
Cassandra

Demo

See the Pen transform: translate by Cassandra (@cassandraPaige) on CodePen.


2.JUST ANOTHER CSS UI

Just another CSS UI with page transition.

Made with

1
2
Html
Css/SCSS

Author

1
Jamie Coulter

Demo

See the Pen Just another CSS UI by Jamie Coulter (@jcoulterdesign) on CodePen.


3.MULTI LAYER PAGE REVEAL EFFECT

Multi layer page reveal effect in HTML, CSS and JavaScript.

Made with

1
HTML (Pug) / CSS (Stylus) / JavaScript

Author

1
Mehmet Burak Erman

Demo

See the Pen Dummy Multi Layer Page Reveal Effect by Mehmet Burak Erman 🧛🏽‍♂️ (@mburakerman) on CodePen.


4.TILES PAGE TRANSITION

Tiles page transition in HTML and CSS.

Made with

1
HTML (Pug) / CSS (SCSS) / JavaScript

Author

1
Milan Ricoul

Demo

See the Pen Tiles Page Transition (CSS) by Milan Ricoul (@firestar300) on CodePen.


5.ARTICLE TRANSITION PAGE

Article transition page in HTML, CSS and JS.

Made with

1
HTML / CSS (SCSS) / JavaScript

Author

1
Muna

Demo

See the Pen Article transition page by Muna (@Munamohamed94) on CodePen.


6.PAGE TRANSITION

Simple page transition.

Made with

1
2
3
HTML/Pug
CSS/SCSS
JavaScript (vue.js)

Author

1
ktsn

Demo

See the Pen Simple Page Transition by ktsn (@ktsn) on CodePen.


7.Fullscreen Layout Page Transitions

Page transitions with HTML, CSS and JavaScript.

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Marcelo Ribeiro

Demo

See the Pen Fullscreen Layout Page Transitions - Pure JS/CSS by Marcelo Ribeiro (@marcelo-ribeiro) on CodePen.


8.React Animated Page Transitions

Just a small demo to show a few page transitions in React. Using GreenSock and SVG.

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Sarah Drasner

Demo

See the Pen React Animated Page Transitions by Sarah Drasner (@sdras) on CodePen.


9.REVEAL CONTENT ANIMATION

Reveal content animation and menu.

Made with

1
2
3
HTML
CSS
JavaScript (jquery.js)

Author

1
Tobias Glaus

Demo

See the Pen Reveal content animation (and menu) by Tobias Glaus (@tobiasglaus) on CodePen.


10.Transitions

Easy css page transitions.

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Filipp

Demo

See the Pen transitions by Filipp (@blossk) on CodePen.


11.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 with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Rachel Smith

Demo

See the Pen Expanding card page transition effect by Rachel Smith (@rachsmith) on CodePen.


12.Cubic Bezier Page Transition

GSAP Cubic bezier page transition.

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Maciej Siwanowicz

Demo

See the Pen GSAP Cubic bezier page transition by Maciej Siwanowicz (@Polenji86) on CodePen.


13.SIMPLE CSS3 PAGE TRANSITION

A simple and performant CSS3 page transition.

Made with

1
2
3
HTML
CSS/Less
JavaScript (jquery.js, tweenmax.js)

Author

1
Paul DeCotiis

Demo

See the Pen Simple CSS3 Page Transition by Paul DeCotiis (@decotii) on CodePen.


14.Vue2 Page Transitions With GSAP

Some default Vue2 page transitions.

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Tim Rijkse

Demo

See the Pen Vue2 page transitions with GSAP by Tim Rijkse (@timrijkse) on CodePen.


15.Easy CSS Page/Slide Transitions

Super easy slider/page transitions.

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Jamie Coulter

Demo


16.Page Transition With Loader

Page transition with loader in HTML, CSS and JavaScript.

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
John Heiner

Demo


17.Page Transitions

Page transitions with HTML, CSS and JavaScript.

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Romswell Roswell Parian Paucar

Demo


18.Page Transition Loader

New page preloader concept. SVG circle loader with morphing effect. Responsive animated wireframe.

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Arsen Zbidniakov

Demo


19.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 with

1
2
3
Html
Css/SCSS
Javascript

Author

1
David Marland

Demo


20.Kontext

A context-shift transition inspired by iOS.

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Hakim El Hattab

Demo