Jump to content
Search Community

Sadness7311

Members

  • Posts

    12

  • Joined

  • Last visited

 Content Type 

Posts posted by Sadness7311

    I want to do this horizontal text animation

    in GSAP

    Posted

    I want to do a animation in which the text goes towards the right and disappears and new text comes. I am making a website. The code is given below. 

    <html>
<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cormorant">
    <script src='https://kit.fontawesome.com/a076d05399.js'crossorigin='anonymous'></script>
    <link rel="stylesheet" href="Styles.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/ScrollTrigger.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/TextPlugin.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Gsap</title>
</head>
<body>
    <ul class="nav">
        <li><h1 class="logo"></h1></li>
        <a class="menu"><i class="fas fa-bars"></i></a>
    </ul>
    <h1 class="head"></h1>
    <p class="para"></p>
    <div class="container"><div class="container2"><h1 class="head2">We Offer Great Things</h1><p class="para2">At our site, we offer great things to our readers. Whether you're interested in exploring the latest news and trends, delving into deep philosophical questions, or learning about innovative new technologies and ideas, we have something for you.</p></div></div>
    <script>
        gsap.registerPlugin(TextPlugin, ScrollTrigger);
        function loadAnimation() {
            gsap.set('.menu', {x: '+=200'})
            gsap.to('.menu', {
                duration: 2,
                x:'-=200',
                rotation: 360
            })
              const tl = gsap.timeline();
               tl.to('.logo', {
                   duration: 2,
                   text: 'Read & Write'
               })
            tl.to('.head', {
                duration: 1.5,
                text: 'Words that Matter'})
            const s = 'Explore a diverse range of thought-provoking and insightful articles, on our exclusive articles page. <br>\n' +
                '        Enhance your understanding of the world around us.';
            tl.to('.para', {
                duration: 5,
                text: s
            })
        }
            window.addEventListener("load", loadAnimation)
    </script>
</body>
</html>
//My CSS Class

    body {
    margin: 0;
    padding: 0;
    background-image: url("background.jpg");
    background-position: center;
    transition: 1s;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: "Cormorant", sans-serif;
    overflow-x: hidden;
}
html {
    scroll-behavior: smooth;
}
.nav {
    display: flex;
    width: auto;
    height: 70px;
    background-color: transparent;
    list-style-type: none;
}
.nav h1 {
    font-size: 6vh;
    text-transform: uppercase;
    text-align: center;
}
.menu {
    font-size: 5vh;
    position: absolute;
    right: 0;
    color: white;
    margin-top: 5vh;
    margin-right: 4vh;
    cursor: pointer;
}
.head {
    text-align: center;
    font-size: 15vh;
    position: relative;
    top: 10vh;
}
.para {
    font-size: 4vh;
    text-align: center;
}
@media screen and (max-width: 900px) {
    .head {
        font-size: 12vh;
    }
    .para {
        font-size: 3vh;
        margin-top: 50px !important;
    }
}
.container {
    position: absolute;
    height: 100vh;
    background-image: url("background2.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    top: 100vh;
    background-color: white;
}
.container2 {
    background-color: transparent;
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0;
    overflow: hidden;
}
.container2 h1 {
    text-align: center;
    font-size: 9vh;
    margin-top: 30vh;
    margin-right: 5vh;
}
.container2 p {
    text-align: center;
    font-size: 4vh;
    margin-right: 5vh;
}
@media screen and (max-width: 900px) {
    .container2 h1 {
        font-size: 6vh;
    }
    .container2 p {
        font-size: 3vh;
    }
}
×
×
  • Create New...