Animar titulos em css

Como animar titulos em css

O pessoal de front-end responsável pelo site amy-movie.com revelam como foi criado o ecra de abertura do site utilizando renderização por css e transições tween.

A sequência de titulo do site

Na página de abertura do site amy-movie.com assistimos à animação de um texto no canto superior esquerdo. Vamos ver como o site consegue fazer isto, sugerindo algumas técnicas para a animação. Como ressalva, à que manter em mente que esta é apenas uma forma de conseguir o efeito, sendo que existem várias outras também válidas, como na maioria das coisas em webdesign o único limite é a imaginação.

Ligação às bibliotecas

001 <!-- Place in the head of your page -->    002 <script src="https://cdnjs.    cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>    003 <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

Código HTML

Estrutura básica HTML par ao elemento. Temos uma tag <h2> formatada com a class ‘visuallyhidden’ – este não será visivel no browser mas é útil em termos de optimização SEO.
Numa div principal colocamos cada linha do titulo dentro de paragrafos <p>, ambos os elementos são formatados via css. A partir daqui podemos dar inicio à animação.

001 HTML:     002 <h2 class="visuallyhidden">A heart-breaking journey, a ground-breaking motion picture</h2>    003 <div class="teaser__title">    004 <p class="line">A heart-breaking</    p>    005 <p class="line">journey</p>    006 <p class="line">a ground-breaking</    p>    007 <p class="line">motion picture</p> 008 </div>    009 CSS:    010 /* Class shown for additional     reference */    011 .visuallyhidden {    012 position: absolute;    013 overflow: hidden;    014 clip: rect(0 0 0 0);    015 height: 1px;    016 width: 1px;    017 margin: -1px;    018 padding: 0;    019 border: 0    020 }

Estilizar os titulos

001 CSS:    002 // Aparecencia    003 .teaser__title {    004 color: #FFF;     005 font: normal 90px/110px AkzidenzGroteskBQ, sans-serif;    006 letter-spacing: 8px;    007 position: relative;    008 text-transform: uppercase;    009 }    010     011 .teaser__title .line {012 clear: both;    013 color: inherit;    014 float: left;    015 margin: 0 0 5px;    016 position: relative;    017 visibility: hidden;    018 }

Adicionar pseudo-elemento

001 CSS:    002     003 .teaser__title .line::after {004 left: 0;    005 position: absolute;    006 top: auto;    007 background: #FFF;    008 bottom: 0;    009 content: " ";    010 display: block;    011 height: 7px;    012 -webkit-transition: width 300ms     cubic-bezier(.77, 0, .175, 1);    013 -moz-transition: width 300ms     cubic-bezier(.77, 0, .175, 1);    014 -ms-transition: width 300ms cubic-    bezier(.77, 0, .175, 1);    015 -o-transition: width 300ms cubic-bezier(.77, 0, .175, 1);    016 transition: width 300ms cubic-bezier(.77, 0, .175, 1);    017 width: 0;    018 }    019    020 .teaser__title .line.is--enabled::after {    021 width: 100%    022 } 023

Animação JS e GSAP

Vamos utilizar jquery para aceder aos elementos DOM, embora se possa fazer o mesmo com javascript. Em seguida trabalhamos com a biblioteca GSAP da Greensock (greensock.com(gsap) para definir a timeline de tween da animação do titulo. Isto irá iniciar o desenho da linha préviamente criada no css, basta chamar a função.