Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

1 Newbie

About szyablo

  • Rank
  1. hi i would like to move scroller-end position but i don't know how to do it. I have tried doing this way : end : "+30%" but it doesn't work , seems like it is moving the content end position i would like to move it to the blue line here : for now my scroller trigger looks like : myScrollTrigger.current = gsap.to(contentRef.current, { scrollTrigger: { trigger: triggerRef.current, start: " +=70%", end: "bottom center ", scrub: true, markers:true
  2. I'm updating this if in future anyone gets in similar problem like mine , for me the solution was this export default function useOpacityManager() { const triggerRef = useRef(); const contentRef = useRef(); const myScrollTrigger = useRef(); useEffect(() => { let interval = setTimeout(() => { contentRef.current.style.opacity = 0; myScrollTrigger.current = gsap.to(contentRef.current, { scrollTrigger: { trigger: triggerRef.current, start: "top cent
  3. Hi i did as you said but the markers position is still weird but i probably know why , the problem are images. Probably as they took time to load the containers heigth is < than container with images heigth. Do you know how i can solve this problem ? setTimeout?
  4. Hi thanks for your answer. I'm sorry but i didn't got the array part ? can you show me a little example ? I also noticed that when changing the page my trigger and content markers are in wrong position but when i reload the page they became normal.any suggestion to fix/improve it?) Thanks you for your patience.
  5. @BrianCross and @Rodrigo here you go guys. At first load if you scroll down it works , when you change the component it stops working Click on the button to see what happens https://codepen.io/siinghd/pen/LYxzyWB
  6. I'm having issues with return () => { ScrollTrigger.kill(); }; I dont know why when it is there and i change the page , the animation in the page doesnt work . The problem is that if i remove it there are still trigger of the last page and the animation have a strange beahaviour , any suggestion? https://i.imgur.com/zxG2bXU.gif
  7. So i have many sections and for each section i have one component, now i want to animate every section , do i have to use : import { gsap } from "gsap/dist/gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); for every section? like my main component is like : const Gali_mobile_main = () => { return ( <> <Gali_mobile_section1 /> <Gali_mobile_section2 /> <
  8. @akapowl hi , i figured it out why it wasn't working. I don't know why but it looks like in react you have to set the style propriety to the element like : <div style={{opacity:0}} className="container">
  9. Hi here is the demo : https://codepen.io/siinghd/pen/LYxzyWB
  10. Hi , thanks for your answer ... i took your code and added my html and it works on codepen but not in localhost... it can be cause i'm using nextjs? when i set opacity :0 like this : gsap.to("div.container", { scrollTrigger: { trigger: "section.section4", markers: true, start: "top center", end: "bottom center", scrub: true, markers: true, }, yoyo: true, repeat: 1, opacity: 0, y: 0, });
  11. Hello i'm trying to do something similar to iphone12 pro landing page can be seen here(https://www.apple.com/iphone-12-pro/). But i don't know where to start. So far i've done this : useEffect(() => { gsap.to(".about_section", { scrollTrigger: { trigger: ".about_section", markers: true, start: "top top", end: "bottom center", scrub: true, }, yoyo: true, repeat: 1, opacity: 1, y: 0, }); }, []