Jump to content
GreenSock

OSUblake last won the day on May 13

OSUblake had the most liked content!

OSUblake

Administrators
  • Posts

    9,196
  • Joined

  • Last visited

  • Days Won

    704

Posts posted by OSUblake

  1. Welcome to the forums @macl

     

    That's all possible, but you can't target a number itself. You can animate any object, for example, in some WebGl libraries you would animate the object that has the uniforms on it.

     

    gsap.to(myObject.uniforms, {
      someProperty: 1,
      ease: "bounce"
    });

     

    But it's hard to answer what you should target without seeing some code. 

     

    • Like 1
  2. Hi Trang, 

     

    It's certainly to possible to modify that code to what you want, but it's not something we can really do for you.  Please see the forum guidelines.

     

    Anyone else is more than welcome to chime in with a better solution, but you could just animate 2 waves and then flip the second one around so it faces the opposite direction.

     

    • Like 1
  3. Hi tractaNZ,

     

    I'm a little unclear about what you're asking here. This really isn't the best place to ask about barba's API, but I would assume that if you transitioned to a new page, then you would need to create your ScrollTriggers again. It's whole a new set elements, so even if your previous ScrollTrigger instances were stored in memory, refreshing isn't going to do anything as those elements don't exist anymore.

     

    And you don't need to include a function inside the same file to call it. Assuming you didn't nest scrollFunction inside another function, it should be global. If not, you can always make it global.

     

    window.foo = () => {
      console.log("hello");
    };
    
    
    // in another file
    foo(); // hello
    
    // or
    window.foo();

     

     

    • Like 2
  4. Yes, it makes sense. We get questions like this all the time, and they almost always end up with a very convoluted solution. To me it doesn't make sense to use ScrollTrigger or ScrollSmoother if you can't freely scroll around the page. Stuff tends to end up glitching, just like that site you linked to.

     

    https://gyazo.com/b2735d1e2be31a22482345465f27a742

     

    I would recommend checking out the Observer docs and that demo. ScrollSmoother is just translating the smooth-content section up and down. You can do the same with the Observer by animating some container and even trigger custom animations when it animates into position.

     

    • Like 3
  5. Welcome the forums @Jae_H

     

    Gifs aren't videos, and the only way to control the playback of them is convert every frame to a still image and create a video player using canvas. So basically the best solution is to just use a video, sprite sheet animation, or some other playback medium like lottie.

    • Like 1
  6. 8 hours ago, nicolaseielll said:

    Is there anything strange with my code if you check the /* layer effect */ section from the mounted() ?

     

    That's a lot of code to go through. Can you reduce that down to a minimal demo? You don't even need to include Vue/Nuxt. Just something basic that recreates the issue.

    • Like 1
  7. Yeah, that's creating to 2 timelines. You creating one here.

    baseTl: gsap.timeline()

    And then overwriting the original one here. 

    console.log("baseTl", this.baseTl); // logs out the original timeline
    this.baseTl = gsap.timeline({ paused: true });

     

    That's why I explicitly asked about a Tween because I knew you would do that with a Timeline 😉

     

  8. I guess something like this, but still a little sketchy as we are defining an object and then changing it in mounted.

     

    export default defineComponent({
      data() {
        return {
          myTween: {} as gsap.core.Tween
        };
      },
      mounted() {
        this.myTween = gsap.to(".foo", { x: 300 });
      },
      methods: {
        pauseTween() {
          this.myTween?.pause();
        }
      }
    });

     

     

    • Like 1
  9. 3 minutes ago, Antdev said:

     myDraggable: Array<Draggable>(),

     

    Hopefully there is no issue doing it this way?

     

    I mean, it's fine as long you remember that you're always going to be dealing with an array. 

     

    But I would still focus on my solution, because you may need to something similar to that in future. Like say you want to pause a Tween, how you would define that in the data?

     

    export default defineComponent({
      data() {
        return {
          myTween: ???????????
        };
      },
      mounted() {
        this.myTween = gsap.to(".foo", { x: 300 });
      },
      methods: {
        pauseTween() {
          this.myTween.pause();
        }
      }
    });

     

    If you define that data type, it should be no issue.

    export default defineComponent({
      data(): { myTween?: gsap.core.Tween } {
        return {
          myTween: undefined
        };
      },
      mounted() {
        this.myTween = gsap.to(".foo", { x: 300 });
      },
      methods: {
        pauseTween() {
          this.myTween?.pause();
        }
      }
    });

     

    • Like 1
  10. Welcome to the forums @wrighttw

     

    Your demo seems to be snapping for me, but maybe I'm missing something. 🤷‍♂️

     

    If you're trying to CSS snapping to work with ScrollSmoother, I wouldn't expect that work as it's not using the document's normal scroll. Everything gets translated up. And if you're just doing sections like, I'm not sure I understand the need for ScrollSmoother, let alone ScrollTrigger if there's scrolling. If you're just want to react to mouse-like events, you can use the new Observer plugin.

     

    See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen

     

  11. Hi Shaun,

     

    That's a tricky a situation if you think about. You are trying to match up the progress of a curve, your SVG, to something linear, the scroll position. It's nearly impossible to work unless you manipulate the SVG container so it stays centered, kind of like what @mikel did here. DrawSVG should matchup with the motion path so it should stay in sync.

     

    See the Pen JjMrLeZ by mikeK (@mikeK) on CodePen

     

     

    • Like 3
  12. I think you might need to use the data thing if you want full TS support without going through a bunch of hoops. This is the exact issue, but there is no good solution as the type will always be any and you have to use $options.

    https://github.com/vuejs/docs/issues/694

     

    Unless you add some custom types...

    https://github.com/vuejs/docs/issues/721

     

    But, I can't believe I didn't see what the initial problem was. This is not setting the type. It's setting myDraggable to the actual class.

    myDraggable: Draggable

     

    To get it to work, we actually need to define the type for the data object that is return by the function call. No errors here.

    export default defineComponent({
      name: 'App',
      data(): { myDraggable?: Draggable } {
        return {
          myDraggable: undefined,
        }
      },
      mounted() {
        this.init();
      },
      methods: {
        init() {
    
          let proxy = document.createElement("div");
    
          this.myDraggable = new Draggable(proxy, {
            trigger: ".wrapper",
            type: "x"
          });
        },
        disableDraggable() {
          this.myDraggable?.disable();
        }
      }
    });

     

    If anyone knows a cleaner way to do this in Vue 3 without having to use data, please do share 🙏

     

    • Like 1
  13. You shouldn't need to set the type if you exclude from the data as TypeScript should infer its type when you create the Draggable.

     

    https://codesandbox.io/s/interesting-euler-rhldbv?file=/src/App.vue

     

    The typeof thing I was suggesting was just for the type, but  again, you really don't need to include myDraggable or the proxy in the data. 

     

    return {
          myDraggable: typeof Draggable,
          proxy: document.createElement("div"),
        };

     

    If you're still getting errors, there must something unique to your setup because I cannot reproduce on my end. Do you think you can send me a simplified version of your project that shows the error? A zip or simple repo is fine. 

     

  14. 20 minutes ago, Vivodionisio said:

    Setting immediate render to false has worked a treat. But I’m confused... in the docs (https://greensock.com/docs/v3/GSAP/Tween) it says the default for to() tweens is already false

     

    It is, but you have a bunch of weird stuff going on in your pen. Like using a 0 duration tween .to() when it would be better to use  .set().

    https://greensock.com/docs/v3/GSAP/Timeline/set()

     

    And the first 0 duration tween in a timeline, i.e. the first .set() is going to render immediately.

     

    • Like 2
  15. 5 minutes ago, AdamsCode said:

    Any further updates on this? I'm expierencing the same issue, the only way I can import it now is by using the below method. 

     

    We're still looking into this, but have you tried the method I used in the zipped project here?

     

     

    If that doesn't work, I would probably just do regular <script> tags as you'll never have issues with a bundler and ScrollTrigger will be global in all your files.

     

×