Jump to content
Search Community

ScrollTrigger - multiple triggers not behaving as intended

896terv8iygaedv test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

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.
×
×
  • Create New...