kohlej

I thought that might be the case, but then it weirded me out that it actually almost does the right thing. I know that .roller__inner isnt taking the width of child elements, but of my viewport width, but why does it even scroll then? I will look into it and update here

Hi guys, here is simple demo of me using scrollWidth of element - clientWidth to show whole .roller__inner on scroll. However it's not showing the right padding of .roller__inner as it should. (As far as I know scrollWidth takes padding into the value) Anyone can help with this?

Thanks Zach, this is exactly what I needed. You're very welcome for the demo, the effort you guys put to help users on this platform is incredible, I'm pretty sure that greensock's forum is most "efficient" in giving solutions and most active forum on the internet, and that is thanks to you and few more people here!

Hello guys, I have two div: .box which is parent and .roller which is child. .box has width of 50% while .roller has fixed width which is suppose to be bigger than .box. As I scroll, I want the .roller to move to the left inside the .box and at the end point of trigger, .roller's right side should side with .box right side. I got this working perfectly fine with my codepen example Demo 1, but I want it to work on resize. I tried using resize function but I dont know how to pass value... I also tried to look into function-based values but couldnt find anything that would help me... Any help is appreciated; Demo 1 (Working example without resize) https://codepen.io/kohlej/pen/GRNKjWe Demo 2 (Not working example, trying to use resize function)

Yup exactly this. I went thru docs but obviously missed this part, thanks.

Hey all, I have a website where I used lots of scrollTriggers. Now that I decided to use loco smooth scroll, I relized I need to give scroller to each, which I dont think is the way to go, is there a option how I can set scroller for every scrollTrigger I made?

Uh everything. I guess the community on this forum, it's very helpful. But more directly to GSAP itself, probably ScrollTrigger

Not really good at it, but I will try. Hopefuly someone else also had experience with this who might help. Thanks for usefull info tho!

Here is working example without Locomotive Scroll : https://codepen.io/artyor/pen/mdPyyjK Here it works as intended, where .skew-box is animated on scroll Maybe the point of using onUpdate is more clear in this example? end: () => innerHeight, doesn't seem to do anything for me

I forked LocoScroll demo that from Greensock codepen account. My animation with most usual gsap.to tween works just fine on .rotate-box, however .skew-box which has new instance of ScrollTrigger doesn't work, even tho I gave custom scroller to both. Both animations work if I'm not using locoScroll. Could someone tell me why is this happening and if there is way around it?

Sorry, I found a way how to animate vars, I will update my the post if I cant make it work. EDIT: I got it to work, thanks Zach. Could you please confirm that I'm not doing anything too stupid related to replaced code? https://codepen.io/artyor/pen/poyoWNN?editors=0110

Basically I wanted to animate text, and instead of having same text appear 3x in DOM, and then placing it behind with position absolute, I found it much more neat to use :after and :before to collect data with content: attr(). I just used boxes for codepen as it's faster to make and easier to understand. I would never think of animating CSS variable. How would I target it tho in quickSetter? What I tried is: EDIT: Update in comment below, I got it to work.

Hello all, I used a codepen demo I found here. It skews element on scroll and resets position once you stop. If you check the codepen demo, it works, but only because the target is ".circle", I want target to be ".circle:after". For this I need to use cssRule to select pseudo element, but since the demo is using quickSetter, I'm not sure how to adapt it. Is it possible, if so, could anyone tell me how? PS, I can get wanted result without using pesudo, by using another div with absolute position, but duo to design choices, I have to use pesudo in RL example. Thanks in advance.

Hi Zach. Yes I thought of that, but the class gets added and removed randomly, so I couldnt use event listeners like click, mouseover etc...So was wondering if there was any listener that can be added to element to watch for class change. I guess mutation observer will work, but I will have to rethink this whole thing. Thanks!

I'm aware that this is not Greensock question but I really tried to look for answer everywhere. 1) I made a tween which is paused. 2) I want to play the tween or play it in reverse when class is added to HTML element. I use vanilla JS, so I'm not looking for jQuery solution. Thank you