Card Expansion Effect with SVG clipPath

Today we are going to create a experimental grid layout with “cards” where we’ll animate the card expansion with a morphing effect on the cover image and follow its motion with a delightful animation of a low-poly pattern used as the background of the page.

We are using Trianglify by Quinn Rohlf to generate the background pattern, SVG’s clipPath to morph the card image, and GSAP to animate and control the whole sequence.

We could have used the CSS clip-path property to clip and morph the image but since the support is currently quite limited and inconsistent across browsers, we’ll be using SVG clipPath instead. This way we can make the demo work across all browsers, including IE9.

Card Expansion

Let’s start by taking a look at how the card expansion works.

Since what we want is to only move the selected card without affecting the flow of other siblings, we’ll actually move the container inside by fixing it to a certain position on click and then animate its sizes and position to fill the screen. This way we’ll never cause a flickering of the cards.

As you can see on this screenshot the ‘card’ element is still at the same position while the card is open.

The very first thing that we need to do, is to build the markup and style for the card in its two states. We build the card the way it is in its opened state:

For the closed state, we set the position of the card container to ‘absolute':

.card__container--closed {
position: absolute;
overflow: hidden;
}

To animate the card between the two states, we’ll simply get the card position on the viewport, stick the container to it and then tween each property to the full screen size.

Notice that the ‘x’ property is tweened to the center of the screen. This is done because in order to animate the background, we need to keep track of the card’s center during each frame. We’ll go into more detail later on.

If instead we want to use a polygon like we do in demo 2, 3 and 4, we need to tween each point of the polygon. In the ‘start and ‘end’ array you can see a sub-array of coordinates [x, y] for each point.

As shown here we attach an ‘onUpdate’ callback to each end point, and populate an initially empty array called ‘points’ with the values for each point. Once the length is equal to 4 (the number of points that we’re using) the SVG clipPath is updated and the ‘points’ array is reset.

For demo purposes and to keep things simple, the points are hardcoded. It would be interesting to push this effect forward and set a different clipping shape for each card, or dynamically get the points from the pattern on the background.

Polygonal Background

To complete the effect let’s combine the card floating animation with the background pattern. To animate the SVG we just use CSS transitions (opacity and scale transform).

Notice that we do all this computation ahead, so during the animation we’ll not look at the DOM anymore but instead we’ll just loop the ‘polygonMap’ to find out to which element we need to add or remove CSS classes.

Consistent Choreography

Now, the key to make the animation choreographically consistent is to have a hierarchy among the animated elements, since the primary elements is the card we’ll let the floating drive the background animation.

To do so we’ll pass a callback ‘_onCardMove’ (demo.js) to the ‘_floatContainer’ method (Card.js) that will be called during the tween ‘onUpdate’ event.

In order to detect which polygon needs to be animated, we test if the center of the path polygon previously stored in ‘polygonMap.points’ is inside an imaginary circle where its radius is defined by the card width and the center by the card center x, y.

These parameters are computed in the variable ‘track’ inside the ‘_floatContainer’ method and passed as an argument to the callback (_onCardMove).

In the method ‘_onCardMove’ we can make variations to the background animation. For example, by swapping the if/else statement we inverted the pattern in demos 3 and 4.

To help you understand the background animation in the source files you’ll find a prototype with just the background animation and the circle displayed that you can move around with the mouse (hover.html).

Have a look at the demos and dig into the source, we hope you find this effect useful and inspiring!

Testimonials

"Kyle has helped our company’s image a lot by redesigning our logo, creating our new website and putting together some great, eye-catching ads. He’s very easy to work with and we were able to hit all of our deadlines."

"Kyle has a natural talent for taking any idea I have and turning it into a
visual work of art. He is a genius with layouts and overall concepts, the
first person I call when I know a project needs to be done right."