Jacky Yang

Hi, akapowl, I use BackgroundSizePlugin to make different effect at last. Anyway, your solution works for me, Thanks !

Hi, akapowl , transform: none make the other scrolltrigger content of my page break, is there any other "scrolltrigger way" to make background fixed again ? Thanks!

Hi, akapowl , thanks for the answer, that works!🤩

Hello Teams, here's me again😝. I want to use css "background-attachment: fixed" to style ".sec-1"(with blue background) and I found that the ".sec-3" scrollTrigger effect cause the "background-attachment: fixed" not work(comment out the sec-3 js code will work). How to fix that? Thanks!

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

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

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!🤩

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!

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

Thanks for answer😊

I have two section ('.sec-3', '.sec-5') ,they have their own scroll trigger element, and have the same pin element ('.wrapper').  When scrolling into view I want the view fixed and animating my tweens, but only the first tween work, how to fix that?  thanks!

See the Pen mdLyxjM?editors=0010 by jackyyang (@jackyyang) on CodePen

Thanks for the answer🥰

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

Thanks for the answer! And I notice that

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

I have a section('.sec-3'), I pin it to fixed in view, and it has 3 items('.scroll-trigger-item') to scroll  horizontally when scrolling. I loop the items array but just one item works (the first item). Please help me to fix code to make other items work except the last item(make the last item stop in view's center), thanks!

See the Pen rNvBKgE?editors=1000 by jackyyang (@jackyyang) on CodePen

@mvaneijgen  Thanks, that helps a lot !

Hi, @mvaneijgen, sorry for the late reply, I'm working on another project these day.

Is there any way to keep card1,2,3 moving up over the view when scrolling down into scroller-start, and when scroll up working contrary just like the demo page ? Thanks!

I tried to copy this site's first three cards scroll effect with ScrollTrigger plugin, but I have some problem with the "start" 、"end" option, and they move to fast,  how to change it to implement this effect? Thanks!

See the Pen eYVXjKg?editors=1011 by jackyyang (@jackyyang) on CodePen