Jump to content

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

OSUblake last won the day on April 25

OSUblake had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. 10% of my likes, so about 1,432 sites.
  2. There might be exceptions, like when drawing rectangles using fillRect or strokeRect as it doesn't have to compute a path. It's always best to test and compare first. There really are no hard rules when it comes to coding.
  3. I think images are always faster. This demo really shows the performance difference. When you check "Use bitmap", it will use images instead of drawing shapes, giving a massive performance boost. https://codepen.io/osublake/pen/EOeBdm
  4. Another one I can't take credit for. This is the original. I made that version to show how to use SVG filters inside canvas. Unfortunately, Safari still doesn't support canvas filters. https://codepen.io/mattpopovich/pen/zzENQQ
  5. Ah, nice! I used to use his hyperHTML library before lit-html came out. Didn't know he came out with another one.
  6. More like copy and paste the source code. That is a definitely an expert level tutorial if I've ever seen one. I doubt 0.01% of web developers can even write a shader.
  7. Let's go all in and do Canvas + SVG. Just paint the heat on. 🔥🔥🔥 https://codepen.io/osublake/pen/aLrXzw
  8. I'm pretty sure people will start using it once it starts showing up in demos. It will probably also be a good learning experience for some as I don't think a lot of people know you can do element.querySelectorAll. But I think the biggest usage will be with React and Angular. I've shown some React examples, but Angular is probably worse. Ex HTML: <div #heading class="heading">Lorem Ipsum</div> <div> <div #img class="img"></div> <div #img class="img"></div> <div #img class="img"></div> </div>
  9. Right, I get all that. I was just trying to understand your workflow. Like are you cloning a template, creating elements dynamically and then appending them, appending already existing elements, using innerHTML, etc?
  10. Any reason against in the vars? But that's probably the most versatile. For the people who miss jQuery... const $ = gsap.context(); // document And for Angular, it might be ".nativeElement".
  11. Maybe like this? const interp = interpolate([q1, q2, q3], (start, end, progress) => { // custom interpolation return ...; });
  12. Probably antialiasing. The stroke might not lie perfectly in the pixel grid. Kind of like here. The top box looks lighter with a thicker stroke. That's just nature of how graphics are displayed on a monitor. https://codepen.io/osublake/pen/03a55f0e37f66d5c9c85ef7a91e28705 If you click the translate 1/2 pixel checkbox here, you should see the line go from gray to black. https://codepen.io/osublake/pen/08be2488622766dc922010a69c5b40c8 The only way to really fix that is to move anything that has an odd stroke width 1, 3, 5, etc over 1/2 a pixel. It'
  13. If it's not smooth, maybe make a simple demo so we can mess around and tweak it.
  14. Yep. That's not a bad idea. Any thoughts on this @GreenSock?
  15. So using three.js's slerp is fine, you just need to interpolate an array of them? Would something like this work? const interp = interpolate([q1, q2, q3]); let qx = interp(0.3); function interpolate(targets) { const interpolators = []; let len = targets.length; const iLen = len - 2; const q = new THREE.Quaternion(); for (let i = 1; i < len; i++) { interpolators.push(slerp(targets[i - 1], targets[i], q)); } len--; return p => { p *= len; let i = Math.min(iLen, ~~p); return interpolators[i](p - i); } } function slerp
  16. Definitely not easy. Something like this is definitely a good use case for some gsap utils like interpolate and mapRange. An example of how the points could be setup and then modified in the update function. https://codepen.io/osublake/pen/2ed6786c0e21107ed101211053db81df
  17. What properties are you trying to animate? Do you have some psuedo code?
  18. I know, that's why I tagged someone else 😉
  19. @GreenSock do you have some code for this? I can't find my demos that show this.
  20. That's from the flash days. You should be able to just use onUpdate kind of like what shown here... although they are using Tween.js https://discourse.threejs.org/t/animating-quaternion-rotation/8015/12
  21. Well, I would still consider that part of the web components API. So if you do that way, then how to do you add elements to the shadow root?
  22. Using lineTo definitely requires a lot more work. https://codepen.io/osublake/pen/9ecbcd3e4f22a6187f53de90474083e2
  23. With lineTo, you would need to draw each line of the square. But it's easier to just to use strokeRect or fillRect for a square. https://codepen.io/osublake/pen/b9683e34dff19d85dba7ae6f8015820f
  24. You're right about it being no better/different. Would that API work if you like create an animation after calling context? gsap.context(svgRef.current, () => { gsap.to("circle", { x: 100, onComplete() { gsap.to("rect", { ... }); } }); });
  25. I'll check your demo out in a bit, but this is what I meant scaling. It can be used to change the position of something.