This is the intro text used in this pen: https://codepen.io/creativeocean/details/poJaMjB
A Pen by Tom Miller on CodePen.
Created
December 30, 2021 00:52
-
-
Save numeroSette/aa41dc6e5e99780b5bd89aad2f5e5b8f to your computer and use it in GitHub Desktop.
Showreel Intro Text
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <span class="txt1">www.codepen.io/</span><span class="txt2">creativeocean</span><div class="bar"></div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var t2 = new SplitText('.txt2').chars, | |
| color2 = '#17c0fd', | |
| color1 = '#fff', | |
| moveBar = ()=>{ gsap.set('.bar', {left:gsap.getProperty('.txt1','width') + 1}) }; | |
| gsap.timeline({delay:0.2}) | |
| .set('.txt1', {color:color1, fontWeight:'regular'}) | |
| .set('.txt2', {color:color2, fontWeight:'bold', opacity:0, x:gsap.getProperty('.txt1','width')-2, immediateRender:true}) | |
| .set('.bar', {left:1, backgroundColor:color1, immediateRender:true}) | |
| .to('.bar', {duration:0.1, opacity:0, ease:Expo.easeIn, yoyo:true, repeat:5, repeatDelay:0.3}, 0) | |
| .from('.txt1', {duration:1.1, width:0, ease:SteppedEase.config(14), onUpdate:moveBar}, 2.5) | |
| .to('.bar', {duration:0.05, backgroundColor:color2}, '+=0.15') | |
| .to('.bar', {duration:1.0, width:290, ease:Power4.easeInOut}, '+=0.1') | |
| .from('.container', {duration:1.0, x:135, ease:Power4.easeInOut}, '-=1.0') | |
| .to('.txt2', {duration:0.01, opacity:1}, '-=0.1') | |
| .to('.bar', {duration:0.4, x:290, width:0, ease:Power4.easeIn}) | |
| .from(t2, {duration:0.6, opacity:0, ease:Power3.easeInOut, stagger:0.02}, '-=0.5') | |
| .to('.txt1', {duration:1.5, opacity:0.25, ease:Power3.easeInOut}, '-=1.2') | |
| .timeScale(1.45) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script> | |
| <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, body { | |
| width:100%; | |
| height:100%; | |
| background:#000; | |
| position:relative; | |
| overflow:hidden; | |
| } | |
| .container { | |
| font-size:40px; | |
| font-family: 'Red Hat Display', sans-serif; | |
| letter-spacing:1.5px; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width:600px; | |
| height:40px; | |
| } | |
| .container * { | |
| display:inline-block; | |
| overflow:hidden; | |
| position:absolute; | |
| } | |
| .bar { | |
| width:3px; | |
| height:49px; | |
| position:absolute; | |
| top:-1px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment