Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

OSUblake last won the day on June 23

OSUblake had the most liked content!

OSUblake

Administrators
  • Content Count

    6,371
  • Joined

  • Last visited

  • Days Won

    584

Posts posted by OSUblake

  1. Hi @francescorm

     

    It's really hard to troubleshoot builds, and I'm not really familiar with require.js. Perhaps someone else with more experience with it can chime in.

     

    The gsap files inside the dist folder are umd, so they should work with amd. Have you logged out what gsap is?

     

    require([
        "jquery",
        "gsap",
        "domReady!"
        ], function($,gsap){
    
     console.log(gsap);
    
    });

     

  2. I only see a problem in the embedded demo, showing a scrollbar at the bottom.

     

     

    image.png

     

    Probably a css issue or something to do with running inside an iframe. When I open it up on CodePen it works fine. 🤷‍♂️

     

     

  3. 23 minutes ago, hoper said:

    Shoul I insert my own parent timeline?

     

    Yep.

     

    23 minutes ago, hoper said:

    I tried that with react-gsap, but then all child timelines played sequentially. I need timelines to play parallel. 

     

    Did you use the position paramater?

     

    Add them all at once.

    const master = gsap.timeline();
    
    master.add([childTimeline1, childTimeline2, childTimeline3], 0);

    Or individually.

    const master = gsap.timeline();
    
    master
      .add(childTimeline1, 0)
      .add(childTimeline2, 0)
      .add(childTimeline3, 0);

     

     

    • Like 1
  4. 17 minutes ago, JuVince said:

    To be honest I still understand very little about .current, I need to study it.

    If you happen to know some "for dummies" intro to it, I'm interested !

     

    Yes, it can be very confusing, and I'm not aware of any good tutorials for it. Just something you have to get used to. 

     

    19 minutes ago, JuVince said:

    Also, in that case, would there be any reason to choose either kill() or killTweensOf()?

     

    They're pretty much the same. killTweensOf is useful if you want to kill more than 1, or just a certain property.

     

    useEffect(() => {
      
      const animation1 = gsap.to(foo.current, { x: 100 });
      const animation2 = gsap.to(foo.current, { y: 100 });
      
      return () => {
        animation1.kill();
        animation2.kill();
      };
    }, []);
    
    // vs
    useEffect(() => {
      
      gsap.to(foo.current, { x: 100 });
      gsap.to(foo.current, { y: 100 });
      
      return () => gsap.killTweensOf(foo.current);
    }, []);

     

    • Like 2
  5. 47 minutes ago, JuVince said:

    Now what I don't understand is why gsap.killTweensOf wouldn't work

     

    GSAP isn't animating proxyCount. It's animating proxyCount.current. Perhaps you meant this.

    gsap.killTweensOf(proxyCount.current);

     

    • Like 1
  6. Thanks for making the demo more clear!

     

    33 minutes ago, drurustin said:

    Not sure if this is now a React or GSAP issue.

     

    I blame React. 😉

     

    Your callback isn't keep current when the state changes. Here a couple different ways to handle GSAP callbacks that need to work with React values.

     

    https://codesandbox.io/s/upbeat-rhodes-jp4r1?file=/src/App.js

     

    https://codesandbox.io/s/musing-pine-wqlhs?file=/src/App.js

     

    https://codesandbox.io/s/pensive-mirzakhani-gvfyl?file=/src/App.js

     

     

    • Like 2
  7. 6 minutes ago, Alien10999 said:

    [commonjs] Unexpected token (1741:16) in [folders]/dev/node_modules/gsap/gsap-core.js

     

    It's using CommonJS, which means it doesn't support ES Modules. Try using the UMD files instead.

    https://greensock.com/docs/v3/Installation?checked=core,scrollTrigger#umd

     

    import { gsap } from "gsap/dist/gsap";
    import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
    
    gsap.registerPlugin(ScrollTrigger);

     

×