Jump to content
Search Community

ScrollTrigger left-right triggers

tailbreezy test
Moderator Tag

Recommended Posts

Hello,

 

I want to trigger elements based on their left, right positions relative to the viewport

 or maybe like setting horizontal:true (but the scrolling should happen vertically).

 

I have set up a few boxes and guides where I want to trigger corresponding animations for illustration purposes.

 

Looking forward to your thoughts

 

See the Pen zYoxKYv by dadacoded (@dadacoded) on CodePen

Link to comment
Share on other sites

 

Hey @tailbreezy

 

2 hours ago, tailbreezy said:

Looking forward to your thoughts

 

In such a scenario, you'd have do to the calculations for when to trigger each box's animation yourself, depending on their offsetLeft and the portion of the window's width where to trigger them.

 

You could take this recently added demo for triggering animations within sections in such a scenario as a reference.

 

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

 

 

Since in your case the amount of the horizontal animation of the wrap is equal to the duration of the scroll, you would not need to factor in the offset 

 

... * (maxWidth / (maxWidth - window.innerWidth))

 

as it is done in the demo.

 

On a sidenote:

The way you are positioning your box1 (with transforms applied) will likely throw things off when wanting to tween on transform-values with GSAP, so you should consider maybe positioning it absolute whereever you want instead.

 

Also, the way you have set up your guidelines won't be very helpful. If you position one of them at 50% you will notice that it is definitely not at 50% of the viewport - probably related to the span you added there.

 

Hope this helps.

Cheers, Paul.

 

 

  • Like 3
Link to comment
Share on other sites

Hello Paul,

 

Thanks for chiming in. I can see that this will work so thank you.

I still however, find it confusing to use top/bottom when we are checking left/right on trigger in regard to left/right position on the viewport. Though I am afraid it may be the only way.

 

We are scrolling top to bottom, but the elements on the page in regard to the viewport are moving right to left, so when they reach a specific viewport left/right position they should scrub along.

 

It might be easier to use Intersection Observer to trigger the animations.

Link to comment
Share on other sites

12 minutes ago, tailbreezy said:

I still however, find it confusing to use top/bottom when we are checking left/right on trigger in regard to left/right position on the viewport. Though I am afraid it may be the only way.

 

Well, you are only animating the elements so they come in from the side. Since you are actually scrolling vertically; yes, I think this is the only way. You couldn't expect ScrollTrigger to listen to horizontal 'scroll' when it is not horizontal scrolling you are doing to begin with and in fact you are scrolling vertically.

 

12 minutes ago, tailbreezy said:

so when they reach a specific viewport left/right position they should scrub along

 

And in combination with the above, this is exactly, why you have to calculate when to trigger things.

 

To be honest, it takes some thinking for sure, but it is not that hard to do.

 

See the Pen c571eb01f03c8b6d522728b9d0bbd633 by akapowl (@akapowl) on CodePen

 

 

  • Like 4
Link to comment
Share on other sites

 

22 minutes ago, tailbreezy said:

The thing is that I want to scrub box1TL and box2TL instead of playing and reversing.

 

So, what is hindering you?

 

Just do it, like on any other ScrollTrigger - only the end should be dependent on a certain width instead of height here.

 

See the Pen b8f05dee69dabe80357077e911121f16 by akapowl (@akapowl) on CodePen

 

I updated this pen to use x-translation here instead. There is no problem for me like it is in your demo.

 

Remember when I said this following before?

 

"The way you are positioning your box1 (with transforms applied) will likely throw things off when wanting to tween on transform-values with GSAP, so you should consider maybe positioning it absolute whereever you want instead."

 

My guess is, it is related to that in your example.

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