├── .gitignore ├── README.md ├── app.js ├── index.html └── style.css /.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeSTACKr/gsap-typing-animation/f3f055bfd3e1c39972c39cf94512f39504e61efb/.gitignore -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## GSAP Typing Animation Tutorial 2 | 3 | This repo goes along with my GSAP typing animation tutorial on YouTube. 4 | Video: [GSAP Typing Animation Tutorial](https://youtu.be/ZT66N5hBiCE) -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | const words = ["Jesse.", "A Father.", "A Husband.", "A Developer."] 2 | 3 | let cursor = gsap.to('.cursor', {opacity:0, ease: "power2.inOut", repeat:-1}) 4 | let masterTl = gsap.timeline({repeat: -1}).pause() 5 | let boxTl = gsap.timeline() 6 | 7 | boxTl.to('.box', {duration:1, width:"17vw", delay: 0.5, ease: "power4.inOut"}) 8 | .from('.hi', {duration:1, y:"7vw", ease: "power3.out"}) 9 | .to('.box', {duration:1, height:"7vw", ease: "elastic.out", onComplete: () => masterTl.play() }) 10 | .to('.box', {duration:2, autoAlpha:0.7, yoyo: true, repeat: -1, ease:"rough({ template: none.out, strength: 1, points: 20, taper: 'none', randomize: true, clamp: false})"}) 11 | words.forEach(word => { 12 | let tl = gsap.timeline({repeat: 1, yoyo: true, repeatDelay:1}) 13 | tl.to('.text', {duration: 1, text: word}) 14 | masterTl.add(tl) 15 | }) -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | GSAP Text Animation 8 | 9 |

10 | Hi, I'm_ 11 |

12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Lato&family=Source+Code+Pro&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | body { 10 | display: flex; 11 | align-items: center; 12 | min-height: 100vh; 13 | background: #00050a; 14 | color: #eeeeee; 15 | } 16 | 17 | h1 { 18 | position: relative; 19 | font-family: Lato, sans-serif; 20 | font-size: 6vw; 21 | font-weight: bold; 22 | padding-left: 15vw; 23 | overflow: hidden; 24 | } 25 | 26 | h1 .hi { 27 | display: inline-block; 28 | } 29 | 30 | h1 .text { 31 | font-family: 'Source Code Pro', sans-serif; 32 | font-weight: normal; 33 | padding-left: 1.2vw; 34 | } 35 | 36 | h1 .box { 37 | position: absolute; 38 | bottom: 0; 39 | display: inline-block; 40 | background: #2800ad; 41 | height: 1vw; 42 | z-index: -1; 43 | } --------------------------------------------------------------------------------