[GSAP] TextPlugin 타이핑 효과

[★]  플러그인 

 <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script> 
 <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/TextPlugin.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

 

1. TextPlugin 정의 - 타이핑 효과1

 

[Html]

<div class="wrapper">

        <h1>GreenSock's TextPlugin<span></span></h1>

        <h2>Set or animate text in sequence. Reversible too!</h2>

        <div class="box green"></div>

       

    </div>

[Css]

<style>

        * { margin: 0; padding: 0; }  

        body { background-color:#1d1d1d; font-family: "Signika Negative", sans-serif; color: #999; margin: 0; font-size: 18px;}

        h1, h2 { font-family: "Signika Negative", sans-serif; margin: 10px 0 10px 0; color: #f3f2ef; font-weight: 400;}

        h1 { font-size:42px;}

        h2 {font-size:24px;}  

        .box { width:50px; height:50px; position:relative; border-radius:6px; margin-top:4px; display:inline-block; line-height:50px; text-align:center; color:#333;}

        .green{ background-color:#6fb936;}  

        .brandBar { position:absolute; width:100%; height:40px; z-index:1000; line-height:40px; color:#ccc; padding-left:0px;}

        .brandBar img{ position:absolute; width:90px; right:20px; top:12px;}

        .wrapper { position:absolute; padding:20px;}

        .box { width:300px; }

        h1 span { color:#6fb936; }

    </style>

[Script]

    <script>

        gsap.registerPlugin(TextPlugin) 

        $(function(){

            gsap.defaults({ease: "none"});

            const tl = gsap.timeline({repeat:3, repeatDelay:1, yoyo:true});

            tl.to("h1 span", {duration: 4, text:" is so much fun you should try it some time!"})

            .to(".green", {x:100})

            .set(".green",  {text:"I am done"})

        })

   </script>

 

2. TextPlugin 정의 - 타이핑 효과2

 

 

[Html]

<h1 id="myText"></h1>

[Css]

<style>

        * { margin: 0; padding: 0; }   

         h2 {font-size:24px;}  

        .box { width:50px; height:50px; position:relative; border-radius:6px; margin-top:4px; display:inline-block; line-height:50px; text-align:center; color:#333;}

        .green{ background-color:#6fb936;}  

        .brandBar { position:absolute; width:100%; height:40px; z-index:1000; line-height:40px; color:#ccc; padding-left:0px;}

        .brandBar img{ position:absolute; width:90px; right:20px; top:12px;}

        .wrapper { position:absolute; padding:20px;}

        .box { width:300px; }

        h1 span { color:#6fb936; }

    </style>

[Script]

    <script> 

        gsap.registerPlugin(TextPlugin)

        $(function(){

            const result = 'GSAP 타이핑 효과입니다.';

            gsap.to("#myText", {duration: 3, text: result, delay: 1});

        })

   </script>

 

 

:) 참고링크

티스토리 참고링크

https://lpla.tistory.com/106