Jump to content

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!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. If you already know what audio files are going to be used, then I would just precompute all the data you need upfront. If that's not possible, then you'll probably have better luck with this question on StackOverflow. Sorry I can't be of more help.
  2. You need to interact with the page before you can hear audio. It's a browser thing.
  3. OSUblake

    NPM Build Error

    My guess is that CodePen is limiting what sites can requests assets from their servers.
  4. The easiest solution for dashed lines is to animate a mask as @PointC shows here. https://www.motiontricks.com/svg-dashed-line-animation/
  5. You're overwriting the transform. Let GSAP do it. https://codepen.io/GreenSock/pen/WNNNBpo
  6. You can only use one or the other. Either get rid of the script tags, or remove your imports.
  7. Please test on mouse with a wheel before implementing horizontal scrolling. It's probably not a good idea.
  8. You can change that in the config with nullTargetWarn. https://greensock.com/docs/v3/GSAP/gsap.config() But it's probably best to prevent that code from even running. if (document.querySelector(".blog-hero--hor")) { gsap.set( [ ".blog-hero--hor", ".blog-hero--vert", ".blog-hero--text", ".blog-hero--icons", ], { visibility: "visible", } ); gsap .timeline() .from('.blog-hero--hor', { //animation goes here }, "-=.3" ) }
  9. Hi @MethodNerd Check out this post.
  10. I think part of the problem is that onResize function isn't getting updated values. Try merging the drawBore and onResize functions into one.
  11. We'd love to see some code! Did you ever make that ScrollTrigger demo you were wondering about?
  12. The DOM doesn't magically change itself. Whatever changes the DOM should trigger the refresh. You could also try using a mutation observer. https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
  13. Oh, I didn't mean it that as a hard rule to turn off animations on mobile. Just something to consider. It all depends on what you're doing. You could have a toggle button, kind of like how you see dark and light theme toggles, or something like accessibility control where control animations, giving the user the most control.
  14. No, and trying to do such tests is very error prone. Let's say you run a test and determine it's slow. Great, but you don't know the reason it's slow. It could be something running in the background on the user's computer and not the animation. And that background process that is hogging all the computer's resources might stop right after you run your test. I usually base my performance assumptions on the user agent and screen size. If I can determine it's a mobile device, then I might need to tone down or turn off some of the animations. I've never seen an en
  15. Hi @Ali Manuel First, thanks for helping out in the forums! If I understand your goal, I usually do stuff like this. I create objects with a next property that points to the next object in the list to do something with. I also changed the opacity of some of your images in the css. https://codepen.io/osublake/pen/80eccd11ed941e1736ac76b268ebd150
  16. This has been my experience too. Even if they don't offer a free version of something, I don't immediately click off the page if the product can demonstrate enough value to me.
  17. It really depends on what you're doing. Do you have an example? In general, it's not a good idea to animate state in react, like what you're doing with the percent. React has do a bunch of stuff behind the scenes whenever the state changes. It's faster to just let gsap update the object or element directly, but sometimes that isn't possible, like with that progress bar. With that example, you're forced into using state to make changes.
  18. Hi @JuVince With hooks, if your animation is not inside something like a useEffect, you're probably doing it wrong. Try something like this. https://codesandbox.io/s/test-threegsap-forked-jyzbj?file=/src/components/LoadingBar/LoadingBar.js Also, can I ask why you are using React? I'm trying to uderstand our React users better and how to improve the development experience with React.
  19. Changing repeat needs to be done internally, so that won't work. You should use the repeat method. https://greensock.com/docs/v3/GSAP/Tween/repeat() That's a little different than changing the repeat logic, as it's just calling what's on the vars object. A cleaner way to do that is with the eventCallback method. https://greensock.com/docs/v3/GSAP/Tween/eventCallback() Generally, messing with the vars object isn't going to change anything unless you invalidate the animation. Also note that those methods are also available on timelines. The
  20. So you want it to start at 100,50? Then just set it to that coordinate first. gsap.set(".foo", { x: 100, y: 50 }); gsap.to(".foo", { motionPath: [{x:200, y:0}, {x:300, y:100}] });
  21. Hi @Steve Giorgi It might be a good idea to create your scroll triggers inside a useLayoutEffect, especially if you are using a router. This is adding a new animation to the tlScene1 timeline every time the scroll direction changes. Do you think you can put that in a codesandbox? You have a lot of interconnected parts there, and I'm just trying to understand how you have everything set up.
  22. Hi @Steve Giorgi It's best to create your animations inside a useEffect, and if you need to reference that animation anywhere else, you set it to a ref. This post goes over a little why you should do that. It's using the old gsap syntax, but the concept is still the same.
  23. Hi Makavel1! I think you just might need to control the zIndex. Try adding zIndexBoost: false to your draggable.