Jump to content
Search Community

Iwakura

Members

  • Posts

    3

  • Joined

  • Last visited

 Content Type 

Posts posted by Iwakura

    When using ScrollTrigger's scrub, I want to know how to prevent the animation from reversing.

    in GSAP

    Posted

    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

     

    When using ScrollTrigger's scrub, I want to know how to prevent the animation from reversing.

    in GSAP

    Posted 

    <!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.

    See the Pen vYbwybj by wevolution-void (@wevolution-void) on CodePen

×
×
  • Create New...