Jump to content

Jacky Yang

  • Posts

  • Joined

  • Last visited

Posts posted by Jacky Yang

  1. Hello, Teams, I have a timeline which using scrollTrigger to animate the green section('.sec-5') element. I want the animation only execute when media match 992 px, not execute below 992 px. I use tl.clear() when media is below 992, the animation pause, but I have to scroll a little second to scroll down, this is not I want, I want to scroll down immediately not stuck there. Maybe I misuse the clear() function or is any other solution for this case? Thanks!

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

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





    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
  3. 10 hours ago, Rodrigo said:



    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!

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

  5. I misunderstand the demo😅. I thought when scrolling to the section and keep scrolling , the item will scroll automatically to the left(like my demo), definitely it's not works as I thought. I'm sorry about that, the demo works just fine and great!🤩

    By the way, there's another question about my demo. As the item height is short, is there any solution to make it looks "natural"?  I want the pined section('.sec-3') looks like pinning in view, until  scroll to the end of  '.scroll-trigger'. Now, it looks like '.sec-3' is moving down. Thanks!

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