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

Html
Css/SCSS

Author

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

Html
Css/SCSS

Author

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

HTML (Pug) / CSS (Stylus) / JavaScript

Author

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

HTML (Pug) / CSS (SCSS) / JavaScript

Author

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

HTML / CSS (SCSS) / JavaScript

Author

Muna

Demo

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

6.PAGE TRANSITION

Simple page transition.

Made with

HTML/Pug
CSS/SCSS
JavaScript (vue.js)

Author

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

Html
Css/SCSS
Javascript

Author

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

Html
Css/SCSS
Javascript

Author

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

HTML
CSS
JavaScript (jquery.js)

Author

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

Html
Css/SCSS
Javascript

Author

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

Html
Css/SCSS
Javascript

Author

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

Html
Css/SCSS
Javascript

Author

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

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

Author

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

Html
Css/SCSS
Javascript

Author

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

Html
Css/SCSS
Javascript

Author

Jamie Coulter

Demo

See the Pen Easy CSS Page/Slide Transitions by Jamie Coulter
(@jcoulterdesign) on CodePen.

16.Page Transition With Loader

Page transition with loader in HTML, CSS and JavaScript.

Made with

Html
Css/SCSS
Javascript

Author

John Heiner

Demo

See the Pen Page Transition with Loader by John Heiner
(@johnheiner) on CodePen.

17.Page Transitions

Page transitions with HTML, CSS and JavaScript.

Made with

Html
Css/SCSS
Javascript

Author

Romswell Roswell Parian Paucar

Demo

See the Pen Page Transitions by Romswell Roswell Parian Paucar
(@romswellparian) on CodePen.

18.Page Transition Loader

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

Made with

Html
Css/SCSS
Javascript

Author

Arsen Zbidniakov

Demo

See the Pen Page Transition Loader by Arsen Zbidniakov
(@ARS) on CodePen.

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.