szyablo

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 }, yoyo: true, repeat: 1, opacity: 1, y: 0, });

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 center", end: "bottom center", scrub: true, markers: true, }, yoyo: true, repeat: 1, opacity: 1, y: 0, }); }, 1500); return () => { clearInterval(interval); if(myScrollTrigger.current!=undefined){ myScrollTrigger.current.kill(); } }; }, []); return { triggerRef, contentRef }; } Has the opacity is 1 of the content/containers in the beginning , user dont have to wait 1.5 sec to see the content. But without setting the opacity to 0 the animation wouldn't work so in callback function of setTimeout first thing i do is setting the opacity to 0 of the content . Probably this isn't the best solution but after doing a lot of stuff this is the one which only works correctly for me. Thanks to anyone whom answered.

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?

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.

@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

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

Hi thanks for your answer ,ill check and get back to you

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 /> <Gali_mobile_section3 /> <Gali_mobile_section4 /> <Gali_mobile_section6 /> <Gali_mobile_section7 /> <Gali_mobile_section8 /> </> ); } i have created a hook like : import { useEffect } from "react"; import { gsap } from "gsap/dist/gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; export default function opacityManager(trigger, content) { gsap.registerPlugin(ScrollTrigger); useEffect(() => { gsap.to( content, 5, { scrollTrigger: { trigger: trigger, start: "top center", end: "bottom center", scrub: true, markers: true, }, yoyo: true, repeat: 1, opacity: 1, y: 0, }, 0 ); return () => { ScrollTrigger.kill(); }; }, []); return true; } and i dont know if its correct and in every section i do : const opm = opacityManager( ".prod_mobile_section3", ".prod_mobile_section3_content" );

@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">

Hi here is the demo : https://codepen.io/siinghd/pen/LYxzyWB

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, }); it works but when in center the opacity is zero. here you can see opacity doesnt change So this seems to work 50% the opacity is changed inly when it is at the top: //gsap.to('.content', { // // opacity: 1, // // scrollTrigger: { // trigger: '.content', // start: 'center bottom', // end: '+=25%', // scrub: true, // markers: true // } // //}) // //gsap.to('.content', { // // opacity: 0, // immediateRender: false, // // scrollTrigger: { // trigger: '.content', // start: 'center 25%', // end: '+=25%', // scrub: true, // markers: true // } // //})

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, }); }, []); as you can in the gif at the center the opacity is 0 and at top and bottom is becames 0 , it should be opposite demo : https://codepen.io/siinghd/pen/LYxzyWB