![]() When we click on the “About” or logo/home link we want to toggle the current content by playing and reversing the timeline. 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')) Then it’s time to split all the texts into spans: Splitting() I’m using some Adobe Fonts here ( Freight Big Pro and Tenon) so let’s preload them: preloadFonts('lwc3axy').then(() => ('loading')) Most likely you'd use useTransform to map the scroll values to the properties of the image you want to change. The interval should just call setItems to update the state to the next value. ![]() Once you reach the last element you can clear your interval. Most likely youd use useTransform to map the scroll values to the properties of the image you want to change. You can then use that value to animate the properties of the motion.img of the tree. You can then use that value to animate the properties of the motion.img of the tree. 1 Answer Sorted by: 1 +50 Since you have a two second duration with a 0.5 delay you can have a setInterval with an interval calculated from those two values on every step. Youd use useElementScroll or useViewPortScroll to get the scroll position as a Motion Value. You'd use useElementScroll or useViewPortScroll to get the scroll position as a Motion Value. Import "splitting/dist/splitting-cells.css" 1 Answer Sorted by: 0 Yes, it's possible. Initially, we need to import some libraries and styles: import "splitting/dist/splitting.css" So let’s have a look at the JavaScript for that. 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 |