Ivan Mocs

I'm confused about how to determine the start and height, I want each element that is selected by [data-scroll] to have its own end, I mean when one element exits the viewport first, the transform movement stops. https://codepen.io/adeivan/pen/OJwBomP When viewed from the inspector on the element with data-scroll="0.75", the transform value is still changing even though the position is out of the viewport area. I've tried to set the "end" but when one element exits the viewport, the other element's transform also stops. How to make each element have its own "start" and "end"

its possible to disable the transform that runs outside the viewport? if seen from the inspector when element 1 has out of viewport "transform" is still running, I want it to be paused when out of viewport.

Sorry about that, I'm just trying to learn without using plugins, in the code I only want the scrolltrigger to run outside the class OwnScroller or onLoad() code, therefore I am confused why the scrolltrigger cannot run perfectly like I put the scrolltriger code inside onLoad(). Update : Solution found, thanks in advance

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, }