ScrollTrigger - multiple triggers not behaving as intended

[896terv8iygaedv]

The blue border represents the outline of a mobile phone. The .info images are the images that will appear inside the "phone" (#phoneBorder).

 

Intended Behavior:
1. On load, the phone is positioned absolute slightly above the marina image. The phone should become fixed to the center of the viewport when the center of the phone meets the center of the viewport on scroll.
2. When the phone then meets the center of #animationContainer, it should become fixed for the duration of the "infos" animation using scrollTrigger.
3. When the user scrolls to the footer, the phone should remain in center of #animationContainer and the infos should remain on the last .info. When the user scrolls back up, the entire sequence should reverse.

I thing I'm pretty close. Please assist. An example of the behavior can be found here: https://mobile-app.marriott.com/en-us

See the Pen OJrLPyN by md398asdg07 (@md398asdg07) on CodePen

[Rodrigo]

Hi,

 

This is mostly about HTML and CSS. GSAP is doing exactly what is supposed to do. The problem you have right now is that you are pinning the blue rectangle and moving it on the Y axis as well.

 

This is a better approach IMHO, maybe not the complete job but hopefully a better starting point:

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

 

Hopefully this helps.

Happy Tweening!

[896terv8iygaedv]

Thanks Rodrigo.

Can you explain why "pinning the blue rectangle and moving it on the Y axis as well" is a problem?

Additionally, the phone should never be opacity 0 or hidden.

What is the purpose of adding the .phone-container display flex around the phone?

I'm trying to modify a fork of your code now. Thanks again.

[Rodrigo]

2 hours ago, 896terv8iygaedv said:

Can you explain why "pinning the blue rectangle and moving it on the Y axis as well" is a problem?

This is one of the most common mistakes in ScrollTrigger and something you should avoid. ScrollTrigger will trigger the animation when you reach a certain point when scrolling up and down. Moving the element that triggers the animation up and down can become a source of problems down the road, that's why we don't recommend animating the trigger of a ScrollTrigger instance, even less in the Y axis.

2 hours ago, 896terv8iygaedv said:

Additionally, the phone should never be opacity 0 or hidden.

That was me trying to hide it at some point, nothing more.

2 hours ago, 896terv8iygaedv said:

What is the purpose of adding the .phone-container display flex around the phone?

Center the blue element on both axis.

 

Hopefully this clear things up.

Happy Tweening!

[896terv8iygaedv]

Thanks again. Thinking broadly, what is the GSAP logic then for moving some element into the trigger and then keeping it in the trigger area while animations happen?

It all makes sense to me when everything is already in the trigger area. But when something is above the trigger area and needs to move into it, how does the thinking go...?
 

[Rodrigo]

Hi,

 

As I mentioned before is not just about GSAP logic. HTML and CSS also count in this cases and might not be the simplest thing to achieve in the case of the animation you are aiming for.

 

I'd suggest you to check the ScrollTrigger docs and experiment with pinSpacing: false, start and end points and endTrigger in order to get the right effect.

 

As said before, what you're trying to achieve is not the simplest thing and requires a lot of HTML and CSS preparation ahead before plugin GSAP and ScrollTrigger into the mix.

 

Happy Tweening!