<commit_before>---
title: Animating Connect Four with Vue.js
author: <NAME>
published: true
summary: How the Vue transition component "drops" things into place
description: Continuing our series on building Connect Four with Vue and Phoenix, we'll use Vue transitions and a third party library to animate the SVG checkers falling and bouncing into place when added to the game board.
pull_image: 'blog/connect-four-nightsky.png'
pull_image_caption: Background Photo by <NAME> on Unsplash
series: 'Connect Four'
category: Code
tags:
  - SVG
  - Vue
  - JavaScript
---

When we left off our [Connect Four game last](/blog/basic-connect-four-with-vuejs.html), we used Vue.js components to convert a static HTML view of the Connect Four board into a playable
interface. In this post, we'll animate the checkers falling and bouncing into
place when added to the game board.

Here's how the game behaved at the end of [the previous post](/blog/basic-connect-four-with-vuejs.html):

<p data-height="485" data-theme-id="light" data-slug-hash="eyrMBy" data-default-tab="js,result" data-user="rossta" data-embed-version="2" data-pen-title="Connect Four Vue.js, SVG: first pass" class="codepen">See the Pen <a href="https://codepen.io/rossta/pen/eyrMBy/">Connect Four Vue.js, SVG: first pass</a> by <NAME> (<a href="https://codepen.io/rossta">@rossta</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

<hr />

Clicking columns simply adds new checkers to the board in the first available
slots. Though it works, it doesn't quite *feel* like Connect Four; we want
checkers falling to the bottom of each column.

## Vue transitions<commit_msg>Update tag<commit_after>---
title: Animating Connect Four with Vue.js
author: <NAME>
published: true
summary: How the Vue transition component "drops" things into place
description: Continuing our series on building Connect Four with Vue and Phoenix, we'll use Vue transitions and a third party library to animate the SVG checkers falling and bouncing into place when added to the game board.
pull_image: 'blog/connect-four-nightsky.png'
pull_image_caption: Background Photo by <NAME> on Unsplash
series: 'Connect Four'
category: Code
tags:
  - Vue
  - JavaScript
---

When we left off our [Connect Four game last](/blog/basic-connect-four-with-vuejs.html), we used Vue.js components to convert a static HTML view of the Connect Four board into a playable
interface. In this post, we'll animate the checkers falling and bouncing into
place when added to the game board.

Here's how the game behaved at the end of [the previous post](/blog/basic-connect-four-with-vuejs.html):

<p data-height="485" data-theme-id="light" data-slug-hash="eyrMBy" data-default-tab="js,result" data-user="rossta" data-embed-version="2" data-pen-title="Connect Four Vue.js, SVG: first pass" class="codepen">See the Pen <a href="https://codepen.io/rossta/pen/eyrMBy/">Connect Four Vue.js, SVG: first pass</a> by <NAME> (<a href="https://codepen.io/rossta">@rossta</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

<hr />

Clicking columns simply adds new checkers to the board in the first available
slots. Though it works, it doesn't quite *feel* like Connect Four; we want
checkers falling to the bottom of each column.

## Vue transitions
{'fraction_non_alphanumeric': 0.11344415281423155, 'fraction_numerical': 0.0023330417031204435, 'mean_word_length': 4.764705882352941, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 31, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1889670', 'n_tokens_mistral': 1061, 'n_tokens_neox': 1044, 'n_words': 407}