Inspiration for Article Intro Effects
In Playground, by Manoela Ilic
Some inspiration for effects applied to title headers of articles with a fullscreen image. The idea is to show some creative transition when continuing to the article body.
page-transition
Page Loading Effects
In Playground, by Manoela Ilic
A set of creative page loading effects that use SVG animations with Snap.svg. The idea is to show an overlay with a interesting shape animation while new content gets loaded.
3D Grid Effect
In Playground, by Manoela Ilic
A proof-of-concept effect recreation of the animation seen in a prototype app by Marcus Eckert. The idea is to flip a grid item in 3D, expand it to fullscreen and reveal some associated content. We’ve created two demos with a vertical and a horizontal rotation.
Medium-Style Page Transition
In Tutorials, by Brian Gonzalez
An article on how to achieve Medium’s next page transition effect—an effect that can be seen by clicking anywhere on the “Read Next” footer at the bottom of the page. This effect is characterized by the lower article easing upward as the current article fades up and out.
Split Layout
In Blueprints, by Manoela Ilic
A template for a split layout with two sides. When clicking on a half in the initial view, the layout moves into the respective direction with some transition effects.
A Collection of Page Transitions
In Playground, by Manoela Ilic
A showcase collection of various page transition effects using CSS animations.
Fullscreen Layout with Page Transitions
In Playground, by Manoela Ilic
A simple responsive layout with some fancy page transitions. The idea is to show four items initially and expand them. Some additional page transitions are added for inner items.
Page Transitions with CSS3
In Tutorials, by Sergio Camalich
In the last few years, we’ve seen a lot of single page websites lying around the internet, most of them using JavaScript for some transitions effect. Well, now I’m gonna teach you how you can have your own, but instead I’ll be using CSS Transitions and the :target property to do all the magic.
Expanding Fullscreen Grid Portfolio
In Playground, by Manoela Ilic
Today we want to share a neat experimental portfolio template with you. The main idea is to have a grid layout that we create with jQuery Masonry. Clicking to view more, we expand the according item to fullscreen in order to show a longer description of the item and a representative fullscreen background image.
