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

Iwakura · December 13, 2023

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

mvaneijgen · December 13, 2023

Hi @Iwakura welcome to the forum!

Have you seen the once property of ScrollTrigger? https://gsap.com/docs/v3/Plugins/ScrollTrigger/ Below from the docs, sounds like exactly what you're looking for. Hope this solves your issue if you still need help please include a minimal demo. Happy tweening!

Quote

Once

Boolean - If true, the ScrollTrigger will kill() itself as soon as the end position is reached once. This causes it to stop listening for scroll events and it becomes eligible for garbage collection. This will only call onEnter a maximum of one time as well. It does not kill the associated animation. It's perfect for times when you only want an animation to play once when scrolling forward and never get reset or replayed. It also sets the toggleActions to "play none none none".

Iwakura · December 13, 2023

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

mvaneijgen · December 13, 2023

Thanks for the demo this makes things so much more clear!

1 hour ago, Iwakura said:

1. While the animation progresses as the user scrolls down, it reverses when scrolling up.

This will require some custom logic and that you'll have to manage yourself. ScrollTrigger gives you a lot of tools out of the box, but we can't build in every feature, but that is the beauty of the GSAP tools you can build what ever you like with them, you just have to put in the elbow grease to get there!

I've stolen this logic from our own @Carl's ScrollTrigger Express course over at Creative Coding Club (if you're still looking for a Christmas present for your self, I highly recommend it!) and in the onUpdate function it only updates the progress if it is larger the the current progress.

And for the white space, on the onLeave callback we .kill() your ScrollTrigger and then quickly jump back to the top of the site. If you want some more control on this check out our ScrollTo plugin.

Hope it helps and happy tweening!

See the Pen XWOwMJB?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Iwakura · December 13, 2023

Thank you for providing a detailed response!

It's a perfect answer!

I appreciate it!

Rodrigo · December 13, 2023

Hi,

To complement @mvaneijgen excellent demo, here are a couple of demos that take a different approach:

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

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

Hopefully this helps.

Happy Tweening!

Notifications

Messages

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

Recommended Posts

Iwakura

Link to comment

Share on other sites

mvaneijgen

Link to comment

Share on other sites

Iwakura

Link to comment

Share on other sites

mvaneijgen

Link to comment

Share on other sites

Iwakura

Link to comment

Share on other sites

Rodrigo

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members