Jump to content
GreenSock

Steve Scott

Is there a good tutorial on animating things in on scroll?

Go to solution Solved by marquizzo,

Recommended Posts

(messing around, still not getting the syntax I don't think)...

 

 

It's like a tailwind 2 col grid of images (not on the codepen...), on scroll like as they become visible on the page, I'd like to start animating the opacity in. But with this sample it's more like, when the div scrolls into view, maybe 200px from the bottom it THEN starts the opacity animation. I assume it's with my "top center" but I'm not sure what the docs are referring to as "the scroller" I assumed the page...

 

        let destination = document.querySelectorAll('.destination');

        destination.forEach(group => {
            gsap.to(group, {
                opacity: 1,
                ease: "power3.out",
                duration: 1,
                scrollTrigger: {
                    trigger: group,
                    start: "top center",
                    toggleActions: "play none none none"
                }
            })
        });

One thing I'm trying to avoid is having partial opacity items just chilling in the viewport waiting to move up to animate. Kinda just want it to be when the item is popping in from the bottom on scroll, just go ahead and start that animation.

 

Does that make sense?

See the Pen zYWZemZ by stevescott (@stevescott) on CodePen

Link to comment
Share on other sites

  • Solution

Have you looked at the ScrollTrigger video? If you skip to section 3 (at the 2:50 mark), it talks about toggleActions and how to trigger an animation when an element enters the viewport. Then section 4 (at the 5:10 mark)  talks about the start attribute, I think the problem is that you're using "top center", which waits until the image reaches the center before starting the animation. You probably should be using "top bottom".

  • Like 2
Link to comment
Share on other sites

10 hours ago, GreenSock said:

Yep, @marquizzo is exactly right. 

 

Is this more like what you were looking for?: 

 

 

 

Yep, thats exactly what I was going for, I didn't see the video, it's quite detailed though, love it

 

Thanks again!

  • Like 1
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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×