IbraheemHaseeb

yes got it. Thanks a lot.

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...

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.

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?

can you tell me how can I make them mutually exclusive?

it kinda move a little to the left when you scroll up, works fine during scrolling down but up has this bug

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"

Thank you so much for your time. ❤️

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.

not really what I am looking for

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.

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.

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

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.

I am making a little scrub animation where when I scroll down image zooms in using the scale property and when I am zooming in I want some text to change its opacity from 0 to 1 to make it appear. And when I scroll further down I want that thing to fade out by changing the opacity to 0 again. Can anyone help me? My problem is that I don't know how to make different things animate on a scroll trigger. So far here I am. Obviously you cant see the result because there is Thank you for your time.

OMG, thank youuu sooooo muchhhhhhhh bro.

Okay so I wrote this code such that when I am scrolling it zooms in to an image and when I further scroll it zooms out to its original state of scale:1. Maybe my codepen URL won't work because of the locally stored images. Can anyone just help how to zoom in with scroll then maintain that zoomed in state and then zoom out from that zoomed in state. My code just jumps to zoomed out state with going slowly with scrub:true . index.html style.css app.js