Poylar

Hi. As you can see, I tried to make the block move around in different directions, for this I used scaleX, but the content inside this block shrinks during the animation (And this is logical), what should I use instead of scaleX to make this effect? I tried to find some reference but couldn't find it. I'm sorry if this question is out of scope for gsap, but I just don't know where else to ask.

thank you.I guess it's not quite what I expected, but I was able to achieve this by setting 'end' to 'bottom' and adding another timeline at the end, like you said

thank you. thats work. but how i can delay scroll when i enter in section and animation 'scale' already end? i mean that: 1. trigger scrolltrigger 2. element animated from scale(1) to scale(1.2) 3. scroll little more without animation (like im just scroll void) 4. leave block I just want to delay the user on this screen a bit

Hi. I wanna do domething like video on this website https://fol.com.tr/ (first screen) but i use SmoothScroll plugin, and cant repeat this solution. How i can sticky element im SmoothScroll plugin? Any case?

And I already joined the club, my company just bought it on another account

i mean if i single developer on difference project? i stil should buy plan for few developer?

thank you. can i use one token for few project/computer?

hi. im trying to get direction from Smoother. let smoother = ScrollSmoother.create({ wrapper: "#smooth-wrapper", content: "#smooth-content", smooth: 1.5, effects: true, onUpdate: (self) => { /* i try also like this: self.scrolltrigger.direction smoother.scrollTrigger.direction */ }, }); /* and like this */ window.addEventListener("scroll", (e) => { let nativeScrollVelocity = smoother.scrollTrigger.direction; console.log(nativeScrollVelocity); /** that works ok, but i want get this value from onUpdate() }); if i write self.scrollTrigger.direction i got error: but can can get only 'self'. how is possible? should i get this values from window.onScroll.listeners?Or i can get values from callback? and second quest about pos:absolute header. i put header outside #smooth-wrapper but on scroll my header still going to up on scroll. i want to header keep staying on his position. Thank you.

I'm thinking about joining the club, but it's important for me to understand if I can use paid plugins from npm? Or will I just need to download the source files to my project and import them from there?

that work, thanks you! interesting that in this solution you didn't use the end parameter based on the height of each panel. This is my previous question. In any case, everything works, thanks!

Hello. What i want: when I scroll to the big content block, it needs to first scroll itself to all of its content, and only after that it goes beyond other blocks. can you please give me an example of such an implementation or at least something to read to understand how to implement it? I came up with a solution like start:'bottom 70%' for example, but how do I apply this only to a block that doesn't fit on the screen? p.s what wront with orange block in codepen?

oh sure, i forgot about offsetHeight get height without margins. Thank you , love you

if you add to .panel margin-top:80px; you can see this. https://codepen.io/akapowl/pen/XWqOvRa this is not about margin collapsing... or yes?

@akapowl I wonder why it works like this? I removed the margin and everything is ok, but when there is a margin, gsap writes them in inline styles. So he knows them. Are there any comments on this to understand the reason?

okay looks like this is cuz i have margin top on animated elements

i have this in every not fixed elem. may be problem in this..

i have this on every not fixed elem. if i remove this transfom it hide from top. may be problem in this

im sorry, but in my case i still see back section on leave second section. when all section going to not fixed position. how is possible? i have simple code, but i cant share you. this is work okay with padding hack? this is gif: https://gyazo.com/b9734b28ac096ab32c02eda28ef7528d I would like to solve this problem myself, but I don’t even understand why it works for you, but not for me.any suggestions or hints

omg, thank you very much!

thank you!thats work great.Except that the block with the text "keep scrolling" for some reason is also superimposed. Do I need to add an empty div to avoid this?

Thanks for your reply. But my problem is that I need to add space above the collapsing sections, but when I add it with the 'start' parameter, it doesn't work. My example illustrates this problem. In your example, you can specify start: "-100 top" and see the same problem.

Hello. I looked at many examples, but they all give not what I need. See my codepen. https://codepen.io/poylar/pen/JjvxVQw?editors=1010 The first problem is that if you add an indentation to the top of the sections, then the section that has already scrolled will pop out at the top. As I understand it, the scroll trigger does not solve this problem? The second problem is that after I scroll through all the sections, the last one for some reason climbs onto content that is not related to these sections at all. Here, as I understand it, this is due to the fact that 'end' parameter is not correct. Can you give an example where this implementation exists in the correct form? What I'm trying to do: in the middle of all pages there are 3 blocks that should overlap each other when scrolling. I think you have seen this effect many times, but for some reason all my Google attempts came down to some plugins on elementor and webflow

Even if I put the opacity change before or after the move, it still works with jerk. How can I remove this jump?

Thank you, I understand what you mean (finally) But I still don't understand how I can fix this in this case, if I first need an animation from 0 to .4, then movement, and then what I have in onComplete callback

In the topmost example, the transparency on REPEAT ANIMATION does not change smoothly, it just rises to knowledge 0.4 because of this, a jerk occurs. In the second example, everything works as it should, but this is a simplified version without the initial shift and change in transparency, that is, it does not suit me.