Jump to content
Search Community

IbraheemHaseeb

Members

  • Posts

    18

  • Joined

  • Last visited

 Content Type 

Posts posted by IbraheemHaseeb

    The problem I have when using GSAP with NextJS + Typescript.

    in GSAP

    Posted

    7 minutes ago, GreenSock said:

    What issue exactly, @IbraheemHaseeb? Got a minimal demo? 

     

    It sounds like from your other thread, you might be trying to use the ES Modules in a build system that doesn't understand them. So try importing the UMD files from the /dist/ directory like:  

    import gsap from "gsap/dist/gsap";
import ScrollTrigger from "gsap/dist/ScrollTrigger";

    If you're still having trouble, please make sure you include a minimal demo, like a CodeSandbox or CodePen.

    yes got it. Thanks a lot.

    Import ERROR with ScrollTrigger in Next JS

    in GSAP

    Posted

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

    How do I make my media queries in GSAP exclusive?

    in GSAP

    Posted

    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?

    See the Pen jOBqLow?editors=1000 by ibraheemhaseeb7 (@ibraheemhaseeb7) on CodePen

    Why isn't the end trigger going to bottom?

    in GSAP

    Posted

    6 hours ago, GreenSock said:

    I think it's just a misunderstanding on your part. You're pinning the main container until "bottom bottom" (when the bottom of that container would normally hit the bottom of the viewport, without any ScrollTrigger intervention). So let's say the viewport is 100px tall, and that container has 4 children that each are 100px tall, that means the container is 400px tall total, right? So it would take 300px worth of scrolling until its bottom hits the bottom of the viewport. 

     

    It's not "stuck to the bottom of the ".one" container either - you told it to pin the container for that long, so as you're scrolling, you'd only see the .one element because it's inside the container that's pinned. In other words, it won't appear to scroll because it's pinned. And then when it becomes unpinned, things scroll as normal, thus you see the other child elements. 

     

    As far as I can tell, everything is behaving as it should. 

     

    If you're still having trouble, maybe it'd be best if you described exactly what you want to happen.

     

    Also, a few notes:

    1. I'd strongly recommend setting your transforms directly via GSAP. See 
    2. Typically it's best to use xPercent/yPercent when dealing with percent-based translations so you can layer them on top of other units (more flexible). 
    3. There's no reason to define the animation in a ScrollTrigger that's attached to a Timeline. It's redundant. And the way you were doing it is invalid - you were passing in a string of "tl" instead of an actual animation instance. 

    I took a quick crack at making what I think you MIGHT have been looking for as a starting point: 

     

     

     

    I just used a relative end value so that you can easily make it longer or shorter instead of basing things on where a certain element lines up in the viewport naturally. And I re-ordered the child elements just so their stacking order was correct, so you'd see the first element on top, then the other elements below. You could use z-index for that instead if you prefer. And I positioned the elements absolutely. There are several demos in the docs like this. Hopefully you've seen this page: https://greensock.com/st-demos

     

    Good luck!

    Thank you so much for your time. ❤️

    • Like 1

    Why isn't the end trigger going to bottom?

    in GSAP

    Posted

    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.

    See the Pen YzNordw by ibraheemhaseeb7 (@ibraheemhaseeb7) on CodePen

    I want the scrolling to be slowed in order to make animation last long

    in GSAP

    Posted

    2 minutes ago, GreenSock said:

    I'm not sure if this is what you're looking for, but here's a fork:

     

     

     

    Notes:

    1. You were loading a very old version 2 TimelineMax file - don't do that :)
    2. I'd use a timeline to animate things in the proper order, and just hook that up to a ScrollTrigger that pins the element for however long you want.
    3. Don't use CSS scroll-behavior: smooth. It messes things up. 
    4. Don't set overflow-x: hidden on the html and body - just do it on the body. 
    5. By default, ScrollTrigger doesn't add pinSpacing when the parent is display: flex because that's typically what people want. You can set it to true to force it. 
    6. I would strongly recommend setting all your transforms via GSAP, not just in CSS. It looks like you're doing that with a LOT of the text things. 

     

    I want the scrolling to be slowed in order to make animation last long

    in GSAP

    Posted

    2 hours ago, Shaun Gorneau said:

    I'm curious about what you're defining as "go slower". Do you want the tweens to happen once the ScrollTrigger start point has been met, but the tweens themselves to be independent of any scroll action? Or do you want to "take over scrolling" in such a way that no matter the user's scroll velocity, you're putting a maximum velocity in place?

    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 want the scrolling to be slowed in order to make animation last long

    in GSAP

    Posted

    3 hours ago, GreenSock said:

    Please read this: https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub

     

    When you have "scrub" enabled, it must fit the whole animation between the "start" and "end" values, so the solution is to simply push your "end" further down the page. You can use a relative value if you prefer, like end: "+=2000" for example. 

     

    Happy tweening!

    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

    I want the scrolling to be slowed in order to make animation last long

    in GSAP

    Posted

    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. 

    See the Pen wvgQBdx?editors=0110 by ibraheemhaseeb7 (@ibraheemhaseeb7) on CodePen

    How do I make different objects animate differently on a scrollTrigger?

    in GSAP

    Posted

    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.

    See the Pen wvgQBdx?editors=0010 by ibraheemhaseeb7 (@ibraheemhaseeb7) on CodePen

    I want the scaling to go from scale:3, to scale:1, on scrub. ANYBODY??!!

    in GSAP

    Posted

    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

    See the Pen wvgQBdx?editors=0010 by ibraheemhaseeb7 (@ibraheemhaseeb7) on CodePen

×
×
  • Create New...