Create a circular swipe animation in minutes

  How to add a visual effect that can be used to introduce your website’s visitors to new content

1. Page Document

The first step is to define the page document structure. This is defined with a head section used to load the external style-sheet, along with a body section to contain the main content. The head section can also be used to contain non-visible content such as meta description information. We will insert the content in step 2.

2. Main content
The page content consists of a navigation, and the main section containing each of the visible content articles. Each of the articles have an ID that the navigation items use for linking to. These articles have a section to contain their content, along a span tag used for the swipe effect

 <nav>
<a href=”#p1”>Page 1</a>
<a href=”#p2”>Page 2</a>
</nav>
<main>
<article id=”p1”>
<section>
<h1>Page 1</h1>
</section>
<span></span>
</article>
<article id=”p2”>
<section>
<h1>Page 2</h1>
</section>
<span></span>
</article>
</main>

3. Initiate CSS
Create a new file called “styles.css” and start this with CSS rules to define the general page containers for the html, body and main content. These should be set to display, covering the full width of the page with no margin or border. The main content container should also have relative positioning so that its articles can be positioned relative to it.
body,html, main {
display: block;
width: 100%;
height: 100%;

background: #000;
padding: 0;
margin: 0;
}
main
{
position: relative;
overflow: auto;}

4. Article definitions
The content articles need to be placed in position  ready to display. This is achieved through absolute
positioning – which will be positioned in relation to their relatively positioned parent container. Z-index is used to ensure that the currently targeted article is always on top.Their width is set to cover the full container, using the clip-path attribute to show a circular cutout in the middle.
main article{
position: absolute;
display: block;
height: 100%;
width: 100%;
padding-top: 1em;
-webkit-clip-path: circle(50vh at center);
clip-path: circle(50vh at center);
overflow: hidden;
}
main article:target{
display: block;
z-index: 999;}

5. Article content

The content of each section is stored in their section container. These need to be set to show the background and content in the space of the visible circular cut out. We achieve this by setting its height and width to cover the full article space, with padding to centralise the content inside the circle.
main article > section{
position: absolute;
display: block;
top: 0;
left: 0;
width: 10%;
max-width: 100%;
height: 100%;
padding: 2em calc(50% - 25vh);

}

6. Swipe element

The swipe effect is created by using a block element that is the same colour as the article background and rotates 180 degrees. This provides the illusion of the circleopening to reveal the content. For this to work, absolute positioning and transform origin are required to position the element and animate it from the correct location. Some WebKit browsers have a bug that affect this from working properly, hence we use an animation to define the effect.
main article > span{
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #000;
transition: transform 1s;
transform-origin: 50% 100%;
}
main article:target > span{
animation: open 1s forwards;}

7. Articles and navigation
To be able to distinguish each article in our example, we
are going to set them with different background colours.
This is achieved using the nth-of-type selector, which
allows us to select the article by their index location
inside main. We set the background of their content
section for this effect. Meanwhile, the navigation also
needs to be styled so that it appears at the top of the
page.
main > article:nth-of-type(1) section
{
background: blue;w
}
main > article:nth-of-type(2) section{
background: green;}
nav{
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
background: #000;
}

8. Animation effect
The animation effect is defined inside an animation definition to overcome clip-path bugs in WebKit
browsers. We define an animation from the first frame to 99% of the way through, which makes sure the swipe element rotates 180 degrees and stays fully visible. At the last frame, the swipe element is re positioned out of view.