hot-reload, Javascript and other familiar techniques that the Web has grown over the past. When we click on the “About” or logo/home link we want to toggle the current content by playing and reversing the timeline. Now we have a nice intro 3D transform animation on the texts. Let’s get all relevant DOM elements: let DOM =, timelineSettings.staggerValue, 'switchtime') The design has a custom cursor that we call as follows: new Cursor(document.querySelector('.cursor')) In this file, we'll write the code for our TextAnimation component. To create the file, we can use any text editor or IDE and save it in the directory of the React project. Then it’s time to split all the texts into spans: Splitting() In order to create a TextAnimation component in React, we need to create a new file and import it into App.js. I’m using some Adobe Fonts here ( Freight Big Pro and Tenon) so let’s preload them: preloadFonts('lwc3axy').then(() => ('loading')) Import "splitting/dist/splitting-cells.css" Initially, we need to import some libraries and styles: import "splitting/dist/splitting.css" There are some out-of-the-box features or selling points: Animations ( CodeSandbox demo) Variants. It utilizes the power of the Framer prototyping tool and is fully open-source. So let’s have a look at the JavaScript for that. Framer Motion is a production-ready motion library for React. Note that the necessary style for the content_paragraph element is overflow: hidden so that the reveal/unreveal animation works.Īll elements with the “data-splitting” attribute will be split up into spans that we can then animate individually. So I made a similar typography based layout and move the lines of text by staggering the letter animations. ![]() I fell in love with that lettering effect and wanted to reimplement it using GSAP and Splitting.js.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |