Jump to content

OSUblake last won the day on November 19 2022

OSUblake had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything 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.
  2. Thanks for the demo. I just enabled normalizeScroll and it seems to have fixed it on my end for Android and iOS. Is this working for you? https://codesandbox.io/s/hopeful-wood-mhojbi?file=/pages/index.vue
  3. OSUblake

    GSAP - Wavify

    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.
  4. 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();
  5. Welcome to the forums @RJWadley I haven't seen that before, and Gatsby is acting up for me on CodeSandbox. React frameworks that do SSR on CodeSandbox are just buggy sometimes. Can you try to make a simplified version of that using only React so we can at least narrow it down to React or Gatsby? And maybe also test out using version 17 of React. Thanks!
  6. OSUblake

    Gif Control

    Can you make a minimal demo showing what you are trying to do? If something is happening too early, then you can use delay on the animation or the position parameter if you're using a timeline.
  7. Hi Julien, Have you checked out the Helper Functions page? There are some functions in there for getting the scroll position. https://greensock.com/docs/v3/HelperFunctions#getScrollPosition
  8. Welcome to the forums @Lộc Phạm ScrollSmoother is not included in the regular GSAP package as that's a perk of being a Club GreenSock member. https://greensock.com/club/
  9. 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.
  10. OSUblake

    Gif Control

    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.
  11. Yeah, I don't know how you would do that. I'm sure it's possible with a bunch of math, but that's way beyond the scope of this forum. Maybe someone else will chime in with a better idea on how to pull something like that off without moving the paths.
  12. 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.
  13. Are you required to use TypeScript? Sometimes is more trouble than it's worth.
  14. 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 😉
  15. 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(); } } });
  16. 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(); } } });
  17. 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. https://codepen.io/GreenSock/pen/XWzRraJ
  18. 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. https://codepen.io/mikeK/pen/JjMrLeZ
  19. 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 🙏
  20. 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.
  21. 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.
  22. 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.
  23. Gotcha. We can add in a check for that condition in the next release so others won't run into the same issue.
  24. I'm not seeing any issues in my pen. 🤷‍♂️ https://gyazo.com/bfc6971238cce697bd401cc69db030fd