Jump to content

Ivan Mocs

  • Posts

  • Joined

  • Last visited

Everything posted by Ivan Mocs

  1. 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
  2. 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 } }); });
  3. https://codepen.io/adeivan/pen/oNdWXqm this is the code, when windows is resized, the autoalpha value changes
  4. 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
  5. 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
  6. 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:
  7. 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?
  8. ahh thanks, I changed the scale value to 0.85 and used transformOrigin: "bottom", it's solved
  9. 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)
  10. 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)
  11. 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
  12. 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
  13. thanks in advance, I fixed it and it worked but why after animation both elements disappear https://codepen.io/ivan-nizters/pen/WNJvOLy
  14. i have problem with mouseleave animation, animation only appears once
  15. 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, }
  16. 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
  17. how to make a sliding card with pinned and end with scale down and rotate
  18. 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
  19. I mean like parallax maybe? so the hero section scrolls a bit slower, and the content section scrolls and floats over the hero section, like this https://custo.io/
  20. hello how to make slow scrolling hero section like on this site https://custo.io/ and how disable smooth scroll on mobile viewport
  21. how to make random words animation on first page load like this site: https://dennissnellenberg.com/
  22. hello, i am using gsap scroll trigger, and it is working, and i want to combine it with locomotive scroll but its not working. and how to add back to top function?
  23. Hello, how to make Back to top with progress indicator like this: i use locomotive scroll in html I use it, but it not work : Back to top with progress indicator 2 (codepen.io)