Jump to content
Search Community

Iwakura

Members

  • Posts

    3

  • Joined

  • Last visited

Iwakura's Achievements

  • Week One Done
  • Reacting Well Rare
  • First Post Rare
  • Conversation Starter Rare

Recent Badges

0

Reputation

  1. Iwakura
    Thank you for providing a detailed response! It's a perfect answer! I appreciate it!
  2. Iwakura
    Thank you for your response, mvaneijgen. Actually, I had already tried using the once property, but it didn't work as expected. I created a CodePen to demonstrate the issue. Here's what I found: 1. While the animation progresses as the user scrolls down, it reverses when scrolling up. 2. After all the animations complete, scrolling back up leads to a blank space. Is there something wrong with my code that could be causing these issues? Code Pen https://codepen.io/wevolution-void/pen/vYbwybj
  3. Iwakura started following When using ScrollTrigger's scrub, I want to know how to prevent the animation from reversing.
  4. Iwakura
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"> <style> * { box-sizing: border-box; } header div.mainv { height: 80vh; display: flex; justify-content: center; align-items: center; background-color: yellow; } header div.mainv h1 { font-size: 3em; } main section { display: flex; justify-content: center; } main section div.container { width: 1100px; height: 400px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: aqua; } fotter div.container { height: 300px; background-color: chocolate; display: flex; justify-content: center; align-items: center; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/ScrollTrigger.min.js"></script> <title>Document</title> </head> <body> <header> <div class="mainv"> <h1>Title</h1> </div> </header> <main> <section> <div class="container"> <h2>text</h2> <p>texttext</p> </div> </section> <section> <div class="container"> <h2>text</h2> <p>texttext</p> </div> </section> <section> <div class="container"> <h2>text</h2> <p>texttext</p> </div> </section> </main> <fotter> <div class="container"> <p>text</p> </div> </fotter> <script> let tl = gsap.timeline({}) tl.fromTo( "h1", { y: 0, autoAlpha: 0 }, { y: -30, autoAlpha: 1, duration: 0.5 } ) ScrollTrigger.create({ animation: tl, trigger: ".mainv", start: "top top", end: "+=3000", scrub: 1, pin: true, anticipatePin: 1, }) </script> </body> </html> I am attempting to create an animation using GSAP's ScrollTrigger. The behavior I aim for, especially for the title animation, includes the following points: - The animation should complete when scrolled through 3000px. - The animation should synchronize with the mouse scroll. - I don't want the animation to reverse when scrolling upwards. - Once 3000px scrolling is completed and the animation ends, I do not want the animation to replay. I am using the scrub feature to sync with mouse scrolling, but I haven't found a parameter that disables reverse playback on upward scrolling. Is there any effective solution for this? I plan to post this on a community forum, so please ensure the translation is suitable for that context. Thank you.
×
×
  • Create New...