
Ivan Mocs
Members-
Posts
34 -
Joined
-
Last visited
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
ScrollTrigger Demos
Downloads
Everything posted by 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"
-
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
-
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.
-
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?
-
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
-
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, }