Jump to content
Search Community

Yussuf Nergiz

Members

  • Posts

    5

  • Joined

  • Last visited

 Content Type 

Everything posted by Yussuf Nergiz

  1. Yussuf Nergiz
    How stupid of me ?, after commenting out every code related to Locomotive Scroll the problem got solved. So the problem was because of the Locomotive Scroll afterall nothing to do with gsap, my apologies... Thank you guys for all the help, really appreciate it. Here is the working version of the site (without smooth scrolling of locomotive scroll). https://portfolio-site-4vot-a4u92xrhv-yusufnergiz.vercel.app/
  2. Yussuf Nergiz
    Hello, I apologise for the unclear sandbox. I'll try to create a minimal demo of it with the actual warning, however, like I said the warnings and the bug only occurs in production mode, so I dont know how to show it in sandbox. In the meantime here is a deployed version of my site in vercel, after clicking any one of the shapes (except the white one) and open the console, you will see the warning message. https://portfolio-site-4vot.vercel.app/
  3. Yussuf Nergiz
    1) Hi, Thank you for the quick responses. So I've tried to call gsap.registerPlugin(ScrollTrigger) in index.js but it did not solve the issue unfortunately. 2) The problem also accurs in production build in my local machine. 3) The scroller: "#main-container" inside the scrollTrigger is for the locomotive scroll, and without it the animations don't even work in developement. 4) I've also tried to deploy the site by removing the Locomotive Scroll, however, nothings changed. The main problem rn is that all the animations tiggered with ScrollTrigger starts playing as soon as the page loads, and I get the below error in the console. -- Invalid property scrollTrigger set to {trigger: div.styles_certContainer__vzU0O, start: 'top top', end: '+=50%', scrub: true, toggleActions: 'play none none reverse'}end: "+=50%"scrub: truestart: "top top"toggleActions: "play none none reverse"trigger: div.styles_certContainer__vzU0O[[Prototype]]: Object Missing plugin? gsap.registerPlugin() -- 5) I've added these cdn links to the very top of my <head> tag in index.html but nothing changed. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script> I am pretty new to gsap and web dev in general so the codesand that I've created might be completely useless but here it is. https://codesandbox.io/s/nice-forest-mb8g7e Here is the github link for the whole code if its needed. https://github.com/YusufNergiz/PortfolioSite Thanks in advance.
  4. Yussuf Nergiz
    I have the exact same problem, all of my animations that were suppose to start with a ScrollTrigger just plays as soon as the page loads. I am using React, GSAP and LocomotiveScroll, everything seems to work perfectly fine on build, however, when deploying to vercel the ScrollTrigger is no longer recongnized. I've tried to add gsap.registerPlugin(ScrollTrigger) to all of my useEffects() and imported everything from "gsap/all" but to no avail. This is the error message I get: react_devtools_backend.js:2655 Invalid property scrollTrigger set to {trigger: div, start: 'top center', end: 'bottom bottom', scroller: '#main-container', scrub: true} Missing plugin? gsap.registerPlugin() useLocoScroll(); const mainRef = useRef(); useEffect(() => { gsap.registerPlugin(ScrollTrigger); const ctx = gsap.context(() => { gsap.fromTo('#curtainTop', { y: "-50vh" }, { y: "50vh", ease: 'none', scrollTrigger: { trigger : '#main', start: 0, end: '+=50%', scrub: true, scroller: "#main-container", lazy: false } }) gsap.fromTo('#curtainBottom', { y: "50vh" }, { y: 0, ease: 'none', scrollTrigger: { trigger : '#main', start: 0, end: '+=50%', scrub: true, scroller: "#main-container", lazy: false } }) gsap.to('#main', { opacity: 0, zIndex: -1, ease: 'none', scrollTrigger: { trigger : '#main', start: 0, end: '+=50%', scrub: true, scroller: "#main-container", lazy: false } }) }) return () => { ctx.revert() }; })
  5. Yussuf Nergiz
    Hi, I've built a React site with GSAP and LocomotiveScroll, and added a bunch of ScrollTriggers. Everything works fine and as expected in my local machine, however, when I deploy the site into vercel all the animations that were suppose to get triggered with ScrollTrigger immediately start animating as soon as the page loads. I've seen some other forums with the same problem, however, none of those solutions have worked for me like changing .from() into .fromTo() or calling gsap.registerPlugin(ScrollTrigger) inside useEffects() of every page with a ScrollTrigger animation or adding "lazy: false". I get a this below error in all the pages that has a ScrollTrigger: react_devtools_backend.js:2655 Invalid property scrollTrigger set to {trigger: '#main', start: 0, end: '+=50%', scrub: true, scroller: '#main-container', …}end: "+=50%"lazy: falsescroller: "#main-container"scrub: truestart: 0trigger: "#main"[[Prototype]]: Object Missing plugin? gsap.registerPlugin() ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- almost all of the pages with a ScrollTrigger has a code like this: const Skills = () => { useLocoScroll(); const mainRef = useRef(); useEffect(() => { gsap.registerPlugin(ScrollTrigger); const ctx = gsap.context(() => { gsap.from("#curtain", { duration: 10, x: "-100vw", ease: Power4.ease, scrollTrigger: { trigger: mainRef.current, start: "top top", end: "bottom center", scrub: true, scroller: "#main-container", toggleActions: "play none none reverse" } }) }, mainRef) return () => ctx.revert(); }, []) return ( <> <div style={{position: "relative", overflow: "hidden"}}> <div style={{position: "relative", overflow: "hidden", height: "100vh"}} ref={mainRef}> <div className={styles.curtain} id="curtain"></div> <div className={styles.pageTransitionBlack} id="main"> <Navbar /> <Header headerText={"My Skills"}/> </div> </div> </div> </> ); } export default Skills;
×
×
  • Create New...