OSUblake last won the day on June 24

OSUblake had the most liked content!

OSUblake

Moderators
  • Content count

    2,387
  • Joined

  • Last visited

  • Days Won

    237

OSUblake last won the day on June 24

OSUblake had the most liked content!

Community Reputation

4,368 Superhero

6 Followers

About OSUblake

  • Rank
    Moderator

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

11,633 profile views
  1. SVG animations can be very CPU intensive, but I see no reason for that one to be so high. I'm getting around 1-3% CPU usage in the task manager. You might have some type of Chrome extension messing with it. And have you tried running it in Opera? It should render the same as Chrome.
  2. @GreenSock @Carl Are you serious!!! I just checked, and it seems v59 does not change how scaling text works. The issue I saw with the update causing blurry text in my scroll header demo isn't related to scaling... It's caused by autoAlpha. I guess changing the visibility causes it reraster. With autoAlpha... Without autoAlpha... You need to be careful here. I have not been able to figure out how much time must pass before the element gets rasterized. From what I can tell, it takes at least 2 animation frames. Sometimes more. I think running that demo inside CodePen might be messing with the timing. On a fresh page load, it should look like this.
  3. I wasn't going to add anything, but since you brought it up, here's how I would do it. Imagine the wheel from the its side. It's a regular a polygon, which means you can figure out it's radius. http://mathopenref.com/polygonradius.html http://www.mathsisfun.com/geometry/regular-polygons.html Once you figure out the radius, you can rotate the vertices for each polygon face inside an animation. Each face can then be mapped back into its 1D front view by comparing the top and bottom y-coordinate. If the bottom value is greater than the top, that means the face is upside down, and is on the backside, so it won't be visible. Well, that's how I would do most of it... but don't wait around for me. It's your turn to do make a demo, which I will need to see by close of business today.
  4. @Carl I think I'm going to add more stuff, so you're going to have some catching up to do. I have to ask. After explaining everything, I'm wondering it's hit you yet. You already wrote about how to do this, demo and all. https://greensock.com/1-19-0/
  5. Hi @mikel By scroll jacking, I'm talking about interrupting or changing the native scroll bar behavior. Much like this demo screws with your mouse. I'm not against scrolling animations or parallaxing. Quite the opposite. I actually do a lot of that stuff... but with my own scroll magic. Look at the demo Jonathan posted above. There's actually no content being scrolled, yet the scroll bar behaves normally, even with touch. If you need to do scroll jacking, just hide the scroll bar. You can get the effect you want, but without messing with user expectations. That's what a lot of the apps on GSAP's and Pixi's showcase pages do, most of which have won some type of award. A couple of the first ones I came across. Some really nice stuff! https://www.rainforestfoods.com/experience/#!/slide-intro http://jetlag.photos/ http://truthlabs.com https://moments.epic.net http://masterdigitaldesign.com/#the-master
  6. Hi @jnalvit That's a pretty impressive looking site. Very nice! Angular has a lot of issues when it comes to animations. One performance gotcha in Angular is just running an animation. GSAP uses requestAnimationFrame, which is a browser event that automatically runs inside the Angular Zone. Once handled, Angular will perform change detection, calling ngAfterViewChecked, which may happen up to 60 times per second. I don't know if this will improve anything, but if you're not animating a property on your component, you should set that animation up to run outside Angular. constructor(private ngZone: NgZone) {} ngOnInit() { this.ngZone.runOutsideAngular(() => { // setup your animations to run outside Angular }); } But I think most of your performance problems are related to your CSS. This is very bad. img { will-change: transform!important; } That's causing Firefox to run out of memory because you're creating too many rendering layers. Once you go over that limit, Firefox cancels all the will-change optimizations. The only time I would recommend using will-change is for certain scaling animations. Check out this thread. Dealing with will-change in Chrome has been issue for the past year... https://greensock.com/will-change If you want to move something onto it's own rendering layer, you can set force3D to true. // You only have to call force3D on an element once TweenLite.set(foo, { force3D: true }) Another problem I see in your CSS is that you have transitions set to all. This is going to cause GSAP and CSS to fight over the animation. You need to be specific about which properties you want transitions on, and make sure you're not animating the same property with GSAP. .wrapper { transition: all .35s cubic-bezier(.215,.61,.355,1); }
  7. We can't tell what's going on from code snippets or screenshots. Works fine with HTML elements. https://www.webpackbin.com/bins/-KkaJTiZGn7M-kgh7htF Breaks with SVG elements. A 3D matrix is added to the inline style on drag, which shouldn't happen. https://www.webpackbin.com/bins/-KmzWwaJlU8czM7W1gw9 Really hard to say where the problem lies. Those are valid SVG elements. You can see the transform attribute being animated if you quickly drag and release, which is the throwProps animation. I'm also noticing that usability seems to be a lot worse with a bounds.
  8. And here's an example of a particle fountain using the Physics2DPlugin.
  9. Particle Animation To create a particle animation, we need to create some display objects for GSAP to work with. Here's what a very basic sprite object might look like. var sprite = { texture: texture, // Image or canvas to render width: texture.naturalWidth || texture.width, height: texture.naturalHeight || texture.height, originX: 0.5, // Transform origin, so 0.5 would be 50% originY: 0.5, alpha: 1, rotation: 0, scale: 1, x: 0, y: 0, }; Now you can animate that object just like you would if it were an HTML or SVG element. TweenMax.to(sprite, 2, { x: 100, y: 200, rotation: 180, scale: 0.5, alpha: 0.2, ease: Sine.easeInOut }); And on every animation frame, you would render the sprite like this. TweenLite.ticker.addEventListener("tick", render); function render() { context.clearRect(0, 0, canvas.width, canvas.height); var offsetX = sprite.originX * sprite.width; var offsetY = sprite.originY * sprite.height; context.save(); context.translate(sprite.x + offsetX, sprite.y + offsetY); context.rotate(sprite.rotation * Math.PI / 180); context.scale(sprite.scale, sprite.scale); context.globalAlpha = sprite.alpha; context.drawImage(sprite.texture, -offsetX, -offsetY); context.restore(); }
  10. Offscreen Canvas Canvas is fast, but it's not a silver bullet. You still need to be mindful of how things get rendered. If you're constantly drawing something that does not change much, like its shape or color, you may be able to improve performance by rendering that object to an offscreen canvas (cacheAsBitmap). Here's a good EaselJS demo showing the performance difference caching stuff to an offscreen canvas can make. Checking the cache enabled checkbox will provide a massive performance boost. http://createjs.com/demos/easeljs/cache And here's a simplified demo without any animations showing how to use an offscreen canvas. This is same technique I'm using in that canvas orbs demo to draw the gradient.
  11. Blurry Lines Drawing horizontal and vertical lines may appear blurry. This is by design, and makes more sense if you understand how stroke-width works in SVG. The stroke is centered on a path, so half of it will be on one side of the path, and the other half will be on the other side of the path. So drawing a 1px line at a whole pixel value will cause it to be drawn inside 2 pixels because it is straddling the pixel. The fix is to translate the context back half a pixel before stroking. context.translate(-0.5, -0.5); context.stroke(); Notice the difference between these two rectangles. The bottom rectangle is stroked using the 1/2 pixel translation trick. This is very useful, for example, when drawing grids.
  12. Canvas Appears Blurry On HiDPI screens, like Retina, 4K/5K, and a lot of phones, the canvas may appear blurry. The TL;DR version of it is that you need to scale the canvas to match to the pixel density. This should appear sharp on a HiDPI screen. This may appear blurry on a HiDPI screen.
  13. Transforms Here's a post that explains a technique for doing transforms in canvas the same way GSAP does them in the DOM and SVG. And here's an interactive demo comparing that technique to GSAP. The red box is SVG and is being set by GSAP. The yellow box is canvas using the STARS technique, and the black dot is the transform origin. The canvas box should be perfectly aligned with the SVG box.
  14. Canvas Context I like to think of working with the canvas as telling a robot how to draw something, and this is done primarily through the canvas context. The context is also where you set all the styling like fill style, stroke style, line width, alpha, shadow, font, transforms, filters, blend modes, etc. Think of it kind of like the current CSS style. Here's a list of all the properties and methods available on the context. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D An important technique, particularly when doing transforms, is to save and restore the state of the context. Check out the comments in this demo. The same fillRect method is being called with 3 different context states. Note that saves can be nested, and every save call should have a matching restore call.
  15. Hi @Chris You may need to update your notifications settings to get emails... https://greensock.com/forums/notifications/options/ One of these days I need to make some type of blog post about how to use canvas with GSAP. Outside of 3d transforms, the 2d canvas can do everything HTML and SVG can do... and more. Don't know if you saw this, but here's a good post about how to get started with canvas and GSAP. Kirupa and MDN also have some good tutorials on using canvas. I can make a version of your particles later, but here's a nice little demo showing how to render a bunch of objects with GSAP. It also demonstrates how to scale the canvas for HiDPI screens and how to improve performance by rendering to offscreen canvas (like cacheAsBitmap in Flash). I'll post more stuff here later on, with examples that demonstrate some canvas rendering techniques and gotchas.