A short tutorial on how to recreate a letter stagger animation with GSAP and Splitting.js.
By Mary Lou in Tutorials on June 17, 2020
From our sponsor: Create stunning brand assets with the help of our AI-driven Creative Assistant. Get started today.
Thibaud Allie made this wonderful animation which you can see live on the site of Dani Morales. It happens when you click on “About” (and then “Close”). This kind of show/hide animation on the typographic elements is being used in many designs lately. At Codrops we call it a “reveal” animation.
I fell in love with that lettering effect and wanted to reimplement it using GSAP and Splitting.js. So I made a similar typography based layout and move the lines of text by staggering the letter animations.
The simplified markup looks like this:
Note that the necessary style for the content__paragraph element is overflow: hidden so that the reveal/unreveal animation works.
All elements with the “data-splitting” attribute will be split up into spans that we can then animate individually. So let’s have a look at the JavaScript for that.
Initially, we need to import some libraries and styles:
--이하생략
출저 : https://tympanus.net/codrops/2020/06/17/making-stagger-reveal-animations-for-text/
By Mary Lou in Tutorials on June 17, 2020
From our sponsor: Create stunning brand assets with the help of our AI-driven Creative Assistant. Get started today.
Thibaud Allie made this wonderful animation which you can see live on the site of Dani Morales. It happens when you click on “About” (and then “Close”). This kind of show/hide animation on the typographic elements is being used in many designs lately. At Codrops we call it a “reveal” animation.
I fell in love with that lettering effect and wanted to reimplement it using GSAP and Splitting.js. So I made a similar typography based layout and move the lines of text by staggering the letter animations.
The simplified markup looks like this:
Note that the necessary style for the content__paragraph element is overflow: hidden so that the reveal/unreveal animation works.
All elements with the “data-splitting” attribute will be split up into spans that we can then animate individually. So let’s have a look at the JavaScript for that.
Initially, we need to import some libraries and styles:
--이하생략
출저 : https://tympanus.net/codrops/2020/06/17/making-stagger-reveal-animations-for-text/
어떤 일이라도 노력하고 즐기면 그 결과는 빛을 바란다고 생각합니다.
최신 글
테스트3
테스트22
테스트
인기 글
Creating a Menu Image Animation on Hover
Inspirational Websites Roundup #41
댓글