Jump to content


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

IbraheemHaseeb's Achievements

  1. whenever I use on simple GSAP it works brilliant in NEXT JS but with ScrollTrigger it gives an import error. My code is: import styles from "../styles/Home.module.css"; import Link from "next/link"; import { gsap } from "gsap"; import { useEffect, useRef } from "react"; import { ScrollTrigger } from "gsap/ScrollTrigger"; export default function Home() { const first = useRef(); useEffect(() => { gsap.registerPlugin(ScrollTrigger); gsap.set(first.current, { y: 0, }); gsap.to( first.current, { y: -100, scrollTrigger: { markers: true, start: "top center", }, }, 2 ); }, []); return ( <div className={styles.home}> <section className={styles.first}> <h1 ref={first}>This is first page</h1> </section> <section className={styles.second}> <h1>This is second page</h1> </section> </div> ); and the error is: Server Error SyntaxError: Cannot use import statement outside a module This error happened while generating the page. Any console logs will be displayed in the terminal window. Call Stack <unknown> file:///D:/next%20js/fyn/node_modules/gsap/ScrollTrigger.js (12) wrapSafe internal/modules/cjs/loader.js (1001:16) Module._compile internal/modules/cjs/loader.js (1049:27) Object.Module._extensions..js internal/modules/cjs/loader.js (1114:10) Module.load internal/modules/cjs/loader.js (950:32) Function.Module._load internal/modules/cjs/loader.js (790:14) Module.require internal/modules/cjs/loader.js (974:19) Please guide me what's the issue here...
  2. I am facing this exact issue Jack. Isn't there any way around it. I have been at it for hours but can't get this error to go away.
  3. Hello there, So, I wrote this code for different screen sizes and it seems that as I go to a lower screen, multiple queries get called which causes glitches in my code instead of calling only one query. Kindly let me know how can I make these queries mutually exclusive such that they don't mess with each other. You can see there is a white box in the code and when I scroll down it works fine but scrolling up glitches it. How do I stop other queries to get called?
  4. can you tell me how can I make them mutually exclusive?
  5. it kinda move a little to the left when you scroll up, works fine during scrolling down but up has this bug
  6. So I am attaching the code where when I am scrolling down, the text is working absolutely fine but when I scroll back up it displaces weirdly. Can anyone help me why is this happening? The issue is with the text "Lets Discover"
  7. Thank you so much for your time. ❤️
  8. So in the code you can see that I have added the end: "bottom bottom" such that the end trigger for the element goes to the bottom which in this case should be the bottom of the screen. But for some reason its not going there. Instead its struck to the bottom of the ".one" div container. Kindly help me out here what am I doing wrong. Best Regards, Ibraheem.
  9. I have created some scroll triggers which are not really quite working out together the way I want them to work. I am sure its not a big problem. Its just a tiny fix and it will be working absolutely fine. I would really appreciate if someone can help me out with that.
  10. Yes somehow if its possible to take over the velocity I would like that. Or is there a way that once my first zoom-in is done I make it pin and that pin last for some scrolling and then the rest of the zoom-out continues from that exact point.
  11. I can extend the end value to delay it or lower the start value but that just makes the animation start a little early. I want it to start at the defined time but scalling to go slowly
  12. Hi there, So I have this code up there you can see and I want my scrub animation to go slowly rather than it being dependent on the scrolling speed. Yes, I know about giving value of scrub:1, but that just makes it smooth not slow. I want it to go slowly in order to make this animation last long. // ignore the css and images as they are just for demonstration here. The original thing is different.