Ivan Mocs

I have added pinType : tranform but when scroll like jelly: https://codepen.io/adeivan/pen/zYLaGXE this is when I put the scrolltrigger code into thisScroll(), the scrolltrigger can run perfectly: https://codepen.io/adeivan/pen/bGjKmEQ but how to make the scrolltrigger work properly like it does in thisScroll()?

I have a problem when using the scrolltriger outside of the OwnScroller class, when scrolling the ScrollTrigger has a glitch, but when I install it into the OwnScroller class, the scrolltriger is fine, how do I fix this?

I have a problem with the Scrolltrigger running upside down when scrolling. I took the code from here and it runs up when scrolled : https://codepen.io/GreenSock/pen/RwVGNea

ahh i see, thanks

position does not match the cursor position when the page is scrolled. the position of the image is even away from the cursor and not in the center of the cursor

is it possible to make a lerp effect with gsap, I want when scrolling the distance between elements expands and returns to its original value again.

I have a problem when the window is resized to mobile size, the value of 'start' scrolltrigger jumps, I don't know where the error is, so from that I think changing the 'scroller' value can fix it https://codepen.io/adeivan/pen/XWqRPrr

can remove property 'scroller' in scrolltrigger when on mobile without mediamatch() ? this my code : my_element.forEach((my_element, i) => { let tl = gsap.timeline({ scrollTrigger: { trigger: my_element, scroller: () => window.innerWidth < 1152 ? "" : "[data-scroll-container]", start: "top top", end: "bottom top-=10%", pinSpacing: false, pin: true, // markers: true, scrub: true } }); });

https://codepen.io/adeivan/pen/oNdWXqm this is the code, when windows is resized, the autoalpha value changes

i have problem with scrub position when window is resized, i found the code in this forum, by using scrolltrigger.create the problem is solved but when i move page the autoalpha position immediately becomes 0, without any transition. i am using gsap.timeline and i am getting error in code scrubNavHide.scroll

okay i know, i've removed position:sticky then i added pin via new scrolltriger, but this is the result : https://codepen.io/ivan-nizters/pen/eYrZgXM i want to make it like using position:sticky like this : https://codepen.io/ivan-nizters/pen/qBYZGeP

the above code is already using scrolltriger and it works fine for pins, but when i add scrollsmother, only the sections inside the container are pinned Without ScrollSmoother / ScrollTrigger Only:

I have a problem when using smoothscroll, the yellow mask container should be pinned to the top. Before using the yellow smoothscroll the container is pinned to the top how to solve this?

ahh thanks, I changed the scale value to 0.85 and used transformOrigin: "bottom", it's solved

how to fix it other than using "transform y:" ? and I want to start the rotation animation, 40% from the bottom, which one should i change is the duration or "end:"? and opacity:0 in the previous section will only occur when the next section is 100% Card Pinning (codepen.io)

How to make the section panel size (100vh - the height of the top and bottom navbars), and also make it centered Adding Video (codepen.io)

is it possible to add a delay on the first hover, but when moving to another menu quickly there is no delay, but when the mouseleave has finished the animation, the delay will take effect again

hello i have a problem when the mouse leave animation is jumping, animation starts fadein from bottom, but when animation is not fully finished and when mouse let fadeout to top animation plays

Thank you

thanks in advance, I fixed it and it worked but why after animation both elements disappear https://codepen.io/ivan-nizters/pen/WNJvOLy

i have problem with mouseleave animation, animation only appears once

can i change the "end" property on the timeline when windows is resized? I mean can when the highest viewport is 2560 : "end+=20%," and at the lowest resolution of 1200 : "end+=0%", and when windows is resized then "end" will change fluidly var nav_hide = gsap.timeline({ scrollTrigger: { trigger: ".hide-me2", start: "top top", end: "+=20%", // markers: true, scrub: true, }

can set fadeout pinning section 40% from bottom but still keep section 1 position in the middle or pin state, so when section 2 goes to 40% from bottom then section 1 starts the animation

how to make a sliding card with pinned and end with scale down and rotate

hello i have problem with transition animation and also text. 1.For page transitions I want it to appear from the bottom and disappear to the top, but when I press the button for a short time, the transition appears from top to bottom... 2.And for the fade in text animation I have the same problem, namely if I press the button quickly sometimes the last animation has not been completed, so the animation occurs twice. I want when the button is clicked the transition always appears bottom->up, and the text always from 0 to 1 opacity. This is my code https://codesandbox.io/s/elegant-sara-5wz41g