Jump to content
Search Community

I want to do this horizontal text animation

Sadness7311 test

By Sadness7311
in GSAP

Moderator Tag
 Share

Recommended Posts

Sadness7311 test

Sadness7311

Posted
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;
    }
}
Link to comment
Share on other sites
GSAP Helper test

GSAP Helper

Posted
Posted

Hi @Sadness7311 and welcome to the GreenSock forums!

 

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites
GSAP Helper test

GSAP Helper

Posted
Posted

I'm struggling to understand what you're asking here. I pasted your code into a CodePen but I don't see issues. Can you please make sure you provide a minimal demo (you can fork mine) that clearly illustrates the issue? 

 

See the Pen WNgMNmr?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...