Jump to content
Search Community

scrollTrigger - tweens after scrollTrigger pined element work weirdly

Jacky Yang test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

I have "fade up "(blue,green,pink section text) and "fade-left"(grey sections text) tween which using scrollTrigger to trigger animation. Before entering the pined element they work correctly, but after entering the pined element, the "fade-left" item work weirdly, looks like the tween element's position is not correct, the animation worked before I scroll into the view, how can I fix this case? Thanks!

See the Pen wvjzmWR?editors=1010 by jackyyang (@jackyyang) on CodePen

Link to comment
Share on other sites

Hi,

 

Can you be more specific about which particular section you're having the issues with and what those issues are. You first mention the fade-up and left sections (blue, green and pink) then you mention the grey section text.

 

I can't tell what could be wrong, why and how, since it seems that everything is working the way it should.

 

We would appreciate more feedback from you in order to give you the proper support.

 

Happy Tweening!!!

Link to comment
Share on other sites

  • Solution

Hello Jacky,

 

since you are creating the first sets of your ScrollTriggers in forEach loops at the beginning of your code, they can not know about the pinning that is being created later in your code - and because some of those elements you target appear on the page after the pinning happened, they won't trigger where you'd want them to. So you will probably have to add the pinnedContainer property to those ScrollTriggers too, for them to work as expected after the pinning occured on the page. Also it looks like you'd need to add a refreshPriority to those for them to work properly even after the second time you pinned the wrapper.

You can read more about that in the general ScrollTrigger docs...

 

refreshPriority number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to 

 

...and in the docs for the sort() method. Hope this will help.

 

 https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.sort()

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


 

  • Like 2
Link to comment
Share on other sites

10 hours ago, Rodrigo said:

Hi,

 

Can you be more specific about which particular section you're having the issues with and what those issues are. You first mention the fade-up and left sections (blue, green and pink) then you mention the grey section text.

 

I can't tell what could be wrong, why and how, since it seems that everything is working the way it should.

 

We would appreciate more feedback from you in order to give you the proper support.

 

Happy Tweening!!!

Hi, Rodrigo, Sorry for the unclear description about my problem, my problem is the "fade up" animation(blue,green,pink section text) works fine but after the pined section, the "fade left"(all the grey section text) animation work but the animation start position is not correct, I set it to "top center" but it start earlier or not even start. Thanks!

Link to comment
Share on other sites

8 hours ago, akapowl said:

Hello Jacky,

 

since you are creating the first sets of your ScrollTriggers in forEach loops at the beginning of your code, they can not know about the pinning that is being created later in your code - and because some of those elements you target appear on the page after the pinning happened, they won't trigger where you'd want them to. So you will probably have to add the pinnedContainer property to those ScrollTriggers too, for them to work as expected after the pinning occured on the page. Also it looks like you'd need to add a refreshPriority to those for them to work properly even after the second time you pinned the wrapper.

You can read more about that in the general ScrollTrigger docs...

 

refreshPriority number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to 

 

...and in the docs for the sort() method. Hope this will help.

 

 https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.sort()
 


 

 

Hi, akapowl, thanks for your reply. So I have the rare use case of scrollTrigger😆. Any way, thanks for the solution, it works!🤩

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