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

Jones Greensock released their own scroll plugin, ScrollTrigger, check it out. This looks doable with scroltrigger

Hi Mike, you want the tween to be played when element enters the viewport both way? You can use toggleActions, everything is explain in their scrollTrigger video. https://greensock.com/docs/v3/Plugins/ScrollTrigger

Thanks for info and fast replay, I thought it was me doing something wrong.

Hi Zach, I forked Blake's pen, to animate each box, but start and end point markers move with the page, and don't stick to element, do you know why is that? https://codepen.io/artyor/pen/bGEGVZg?editors=0010

Hi, I will try to acomplish it with this. Yes Im aware that manipulating height/padding is not the ideal, but it was some unique animation I wanted to create. Thank you

Hi guys, here is a demo where I reproduced the problem. Markers of H1 element are off the same amount as the other section element above it changed it's height(padding top and bottom) before it. By markers I also mean the start and end point of actual animation. Any way to avoid this? PS. Thank you for creating this awesome plugin! It's awesome

Thanks! Works just as I wanted I'll check the docs you linked.

I have two tweens in timeline, and both duration is set to same amount ".35". I want to bottom line animation last as long as duration of text animation, and to start at the same time, so I added "-=.35". This would work as intended in my mind if there wasn't stagger in 1st tween, which adds up on its duration. Now I can do calulation and add custom duration to line tween, but I will have more buttons with different char number, so the 1st tween will never be the same. Is there a way to make 2nd tween as long as 1st tween, regardless of how many elements will be affected by stagger?

Well I assume there is still no exact date of release, maybe what is it capable of doing? Can it animate elements on scroll, depending on scroll position, like we can do with ScrollMagic?

Hey, Thank you for reply Zach. I think index might not work as the layout is rather complex, but I will try with data attributes.