gweatherson

I'm at a loss on how to make this gallery behave smoother on mobile, specifically when getting to the section I'd like the user to swipe there fingers up and down and expand/collapse the items instead of tapping. If a user scrolls on the sides of the section they can go to the previous or next (green) sections. This would probably be a pin function. I tried some scrollTrigger options but it felt very jittery. I'd like for it to be touch events instead of scroll. This example is webgl and really complicated, but closer to the goal in mind.. this example also doesn't have sections above and blow so it's more simple in a sense: https://phlntn.com/ Thank you for helping.

Hello! I'll try my best to explain this. The horizontal scroll is working perfectly, but now what I am trying to achieve is: Control each item (.section-list__item) when it reaches the left-hand side of the viewport. Right now all of the 6 items are running the console.log when the trigger is reached. I plan to run a separate function for each that will fade-in the sub-title and other content. Thank you!

In the example I'm moving an intro section off of the page using translate, as well bumping the footer up. If there is a better way to pull this off using gsap let me know. The issue is since the layout changed and the x,y coords scrolltrigger is referencing are now different, the splittext animations aren't firing when they should be, they are happening too late. Is there a better way to bump that intro panel off the screen or call a refresh, update, etc method for the scroll trigger batch elements?

This feels close to what I'm trying to accomplish, huge thanks to so many examples out there. Lost count of how many codepens and threads I looked at. Only issue is it seems to fire twice and I'm not sure why.. thanks!

Have a fade on scrolltrigger that is working well, trying to add a cursor that functions on enter of certain elements. These are working perfectly alone. When added together, line 13 causes the cursor (.ball) to not be in position. The cursor is far above the entered element. Commenting out line 13 fixes the cursor, but then of course the fades are not working. Is there something simple I'm missing?

Trying to use it to better performance as it suggests, nothing is trying to change style-wise.

Figured out the easing by editing the .to properties, now I'm trying to wrap my head around converting the clip path update to use quickSetter. Any suggestions? Still very new to gsap land. https://codepen.io/gweatherson/pen/zYweRGy

Wow @akapowl, thank you! This is massively helpful. I'll dig more into quickSetter and some easing capabilities, but this is a wonderful foundation. Appreciate it!

Brand new to gsap, bear with me please. I'm looking to update the green container width to 100% the further in on mouse move a user gets. Instead of every child scaling and warping I'd like it to "reveal" on mouse move and reset as it is. Hope this makes sense. Inspiration: https://theendless.co