Jump to content
Search Community

Sadness7311

Members

  • Posts

    12

  • Joined

  • Last visited

 Content Type 

Everything posted by Sadness7311

  1. Sadness7311
    https://sadness7311p.vercel.app/ I tried something else, thanks for the help!
  2. Sadness7311
    https://sadness7311p.vercel.app/
  3. Sadness7311
    Can I put it on github and make a site on vercel?
  4. Sadness7311
    gsap.to('.third-section', { yPercent: -10, scrollTrigger: { trigger: '.second-section', start: 'top-=70%', scrub: true, pin: '.second-section', pinSpacing: false, } }) I get this error. There is a small space between the sections. This space increases with the height of the window. On Mobiles, it overlaps the Next heading.
  5. Sadness7311
    Using React + Three JS + GSAP + Locomotive Scroll. When I enable loco scroll, this happens: The whole page is lifted downwards. Please help me.
  6. Sadness7311
    sawacrow, you didn't understand what I am trying to do. I am not making a animate on scroll animation. I was making a kind of parallax scroll effect. Which I have done so. It is not looking good on codepen because nothing loaded. But its working great as hell on my page! https://codepen.io/Sadness7311/pen/QWVQyVq The new codepen, Thanks for trying to help!!!
  7. Sadness7311
    https://codepen.io/Sadness7311/pen/QWVQyVq I have created this pen, but my issue is not showing here. What I have guessed is, that when I scroll, it takes by container element very down and a space is created between them, this causes me to see whitescreen. I have tried doing pinSpacing: false but it won't help.
  8. Sadness7311
    Whenever I scroll to my .container element, it sometimes works fine and sometimes show me a white screen. I am totally annoyed by it. Please help me. let scrollTween = gsap.to('.head2, .para2', { xPercent: 100, ease: "none", scrollTrigger: { trigger: ".container", pin: true, scrub: 1, end: "+=3500" } });//My Code
  9. Sadness7311
    nope, did'nt figure it out The scroll stops, but after a reload, there is a white screen. its real annoying
  10. Sadness7311
    I FIGURED IT OUT!!! THANKS
  11. Sadness7311
    Hello, thanks for the help. I have made the last part of my website scroll without scrolling (like, without moving scroll). Now, I want to make the text move right as I scroll. How do I do that?
  12. Sadness7311
    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...