ScrollTrigger like apple

[bysobi]

Hello everyone! I got inspired by Apple's website: https://www.apple.com/airpods-pro/

I would like to ask for help from those who know how to replicate a block animation. Specifically, I'm interested in the ability to change text and images that are in a fixed position, meaning they do not change their position when scrolling. Could you help me with how to correctly use ScrollTrigger?

This block

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, check out this awesome guide https://gsap.com/resources/st-mistakes and I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[bysobi]

Thanks for help!
Here's an example that I almost managed to create, thanks to you!

See the Pen YzBEBpM by bysobi (@bysobi) on CodePen

I've come close, but I can't figure out the sequence of the animation.
It seems too complicated. The website and the section I want to replicate: https://www.apple.com/ua/airpods-pro/

Question #1
I've almost managed to replicate the text animation.
However, I encountered issues with the image.
The initial appearance of text and image aligns with the example of apple.
Problems arise during the display of the second block.
It should be like this:
1. Scroll through text #1. It's almost gone, but image #1 is still visible and not hidden.
2. As soon as text #2 appears, image #2 smoothly appears.

Question #2
Each block with text and image occupies a height of 100vh.
I would like to keep it that way but reduce the amount of scrolling needed to initiate the animation.

Thank you so much. I've spent over 18 hours but still couldn't solve this issue.

[mvaneijgen]

Hi @bysobi that looks good already. The only thin I would do different is create one timeline with one ScrollTrigger, all  your sections can only ever play if the previous one has done playing, which means it needs to wait until the previous one has finished, that is the perfect use case for a timeline. You were already working with timelines, you just create the forEach loop at the wrong place. 

 

To make it simple I've removed all the ScrollTrigger logic. It sounds weird but, the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

I've enabled the GSDevTools so that you can really view the animation and see what it is doing

 

See the Pen eYxeowW?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

 

And if the animation is looking perfect you could enable ScrollTrigger. I've changed some of your logic and used template literals to make the code easier to edit and read. Right now the scroll distance will be twice the window height, but you can increase of decrease it to your hearts content. As you can see there is no more need for the second ScrollTrigger. Everything gets handeled by one ScrollTrigger and one timeline. Hope it helps and happy tweening! 

 

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

[bysobi]

What you do evokes the most wonderful feelings. 

Thank you for helping people like me. 

I've been working with gsap for a short time, but I've already fallen in love with this plugin.

New demo: 

See the Pen MWLOMXR by bysobi (@bysobi) on CodePen

 

I hope our code, which we created, will help someone in the same way. 
 

I made a few improvements to your code, specifically: 

1. Ensured that the last element does not disappear by adding a condition (not sure if this is an "elegant" solution):

items.forEach((item, i) => {
        tl.to(
            [
                item.querySelector(".scroll-content-item__text"),
                item.querySelector(".scroll-content-item__image")
            ],
            {
                duration: 0.3,
                ease: "power1.inOut",
                yPercent: 0,
                opacity: 1,
            }
        );
        if (i < items.length - 1) {
            tl.to(
                item.querySelector(".scroll-content-item__text"),
                {
                    duration: 1,
                    yPercent: -30,
                    opacity: 0
                },
            );
            tl.set(item.querySelector(".scroll-content-item__image"), {
                opacity: 0,
                ease: "power1.inOut"
            });
        }
    });

2. After completing the animation for the first .scroll-content-item block, the image now smoothly transitions to another.

We almost 1:1 copied the block from the Apple website.

I achieved this thanks to the CSS property that I added for the .scroll-content-item__image class:

transition: opacity .3s ease-in;

Before that, I removed opacity: 0.
 

However, this caused a problem that I can't solve yet. Because I removed opacity: 0, the images are displayed BEFORE the animation triggers.
If I set opacity: 0, I can't achieve the smoothness I need.
Any ideas?

3. How can I make the animation start from the middle of the screen? When I change the "Start" parameter, the block is not displayed in the center in this case.

[mvaneijgen]

10 hours ago, bysobi said:

1. Ensured that the last element does not disappear by adding a condition (not sure if this is an "elegant" solution):

Yep works great! 

 

10 hours ago, bysobi said:

2. After completing the animation for the first .scroll-content-item block, the image now smoothly transitions to another.

We almost 1:1 copied the block from the Apple website.

I achieved this thanks to the CSS property that I added for the .scroll-content-item__image class:

I would just do that with GSAP, much easer to manage.  See last tween in JS moved 

 

10 hours ago, bysobi said:

However, this caused a problem that I can't solve yet. Because I removed opacity: 0, the images are displayed BEFORE the animation triggers.

Sometimes it is easier to change the animation around. Right now you're using all .to() tweens, but .from() is in my opinion the most powerful tween there is. GSAP is smart ant will just animate top the browsers default if nothing is specified. Also check out https://gsap.com/resources/fouc/

 

10 hours ago, bysobi said:

3. How can I make the animation start from the middle of the screen? When I change the "Start" parameter, the block is not displayed in the center in this case.

Everything is where they are, if they are not in the center it is because the CSS has not entered them. Remove all javascript and reposition them with CSS if that is perfect enable JS again and test it. 

 

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