OSUblake last won the day on January 20

OSUblake had the most liked content!

OSUblake

Moderators
  • Content count

    3,175
  • Joined

  • Last visited

  • Days Won

    318

Posts posted by OSUblake


  1.  

    3 hours ago, jamesg said:

    With respect, in such a simplistic use case, if I could have figured out the demo then I would have found (a) solution.  If the protocol here is to post the svg(s) alone then I apologize; I was simply looking for direction, not the solution - i.e. "hey that's stupid" or "this is a potential better way".

     

    I know you were just looking for advice, but I did say it doesn't have to be working. Rather than explaining something in words, it's easier to just modify a demo. That's all.

     

    Is the search not working at all for you?

     

    I usually just do a site search on Google.

    site:greensock.com your search terms

     

    • Like 2

  2. Hi @jamesg

     

    It's always helpful if you can put what you have in a simple demo. It doesn't have to be pretty, or even working. Just something we can experiment with.

     

     

     

    For this, I would probably morph the lips as a mask or clip path for a group element (<g>). In that group, I would put a darkblue rectangle to give it a background color, and for the mouth, well it probably doesn't need to be morphed. The mouth shape could probably be left as is, but move it down on the y-axis so it's not visible in the starting state. You could also scale it down a bit if needed. 

     

    And to animate it, just morph the mask or clip path while moving the mouth up. But that's just one way to do it. There is no correct way.

     

    And animating masks and clip paths have their own little quirks, so you should test to see what works best. If you haven't already, check out the SVG Gotchas thread. It has some good tips on working with masks and clip paths.

     

     

     

    • Like 3

  3. Oh, I haven't used Angular 1 in a long time.

     

    The problem is that you are creating all the animations inside a directive, which reference other directives, which might not be ready. So you're basically creating 3 timelines with 3 animations each, for a total of 9 animations. That of course isn't correct. A parent element should do that if you're trying to create a timeline, but only when all the child elements are ready.

     

    For this it would be better to use latest version of Angular 1, and use components instead of directives.

    https://docs.angularjs.org/guide/component

     

    So you should create a parent component for the voices components, and then inside the $postLink hook of the parent component, create the timeline and animations. I don't have any demos that do something like that, but here are a couple of demos that use components.

     

     

     

     

     

     

     

    And here are a couple good articles on using components and hooks.

    https://toddmotto.com/exploring-the-angular-1-5-component-method/

    https://toddmotto.com/angular-1-5-lifecycle-hooks

     

     

    • Like 2
    • Thanks 1

  4. That's pretty neat effect!

     

    The best alternative is to just animate each element individually. Yes, it requires more tweens, but performance should be the same or better, and you don't have to deal with weird rendering issues. 

     

     

     

     

    • Like 2

  5. Yep. That's clearing and resetting the entire canvas. Setting the width and height attribute changes the internal dimensions of the canvas. And it's faster to set it directly.

     

    // This does the same thing...
    $("canvas").attr({ width: page.w, height: page.h });
    
    // as this...
    canvas.width = page.w;
    canvas.height = page.h;

     

     

    One thing that is confusing about canvas is understanding width and height. Changing the internal size is different than setting the size with CSS. Changing the size of a canvas with CSS causes it to scale, just like an image. To match the resolution of HiDPI screens, like retina and phone displays, a resize should actually look like this.

     

    var resolution = window.devicePixelRatio || 1;
    
    // size/resize the canvas
    canvas.width = page.w * resolution;
    canavs.height = page.h * resolution;
    canvas.style.width = page.w + "px";
    canvas.style.height = page.h + "px";
    context.scale(resolution, resolution);

     

     

    And there's some other stuff that isn't needed in the code, like setting the globalCompositeOperation to source-over. That's the default. And the closePath() call isn't needed if you're drawing a circle. closePath() is the same thing as the "z" command on an SVG path. 

    • Like 3

  6. 6 minutes ago, Alexander Halser said:

    Regarding SVG: I mean really simple SVGs like a <svg><rect></rect></svg>. Does anyone know of speed/rendering comparisons between simple shapes drawn with SVGs and standard <div> tags? For simplicity, all my shapes are inline SVGs, but for rectangles and ellipses, a <div> could be used as well. Does it make a difference to the browsers?

     

    If you're talking about animating transforms, like x and y, HTML is faster. But keep in mind that you can animate SVG the same way by animating the root SVG element or by using an SVG as the source for an image, and animate the image element. SVG performance starts to drop off when you animate elements inside the actual SVG.

    • Like 1

  7. Somebody touched on monitoring performance in this post...

     

     

     

    But if performance is a problem, you probably need to change what you're animating. If you're messing with SVG or HTML, you should look into using canvas or WebGL.

     

    And taking a page from game development, there's a reason some games are capped at 30fps. Animations will appear smoother running at a constant 30fps over a framerate that is constantly changing.

     

    • Like 3

  8. There is no width here.

     

    var anchoMenu = -elMenu.width();
    $("li").css("transform", "matrix(1, 0, 0, 1," + anchoMenu + ", 0");

     

     

    And it would be better to let GSAP handle setting the transform if you're going to animate it.

     

    elMenu.css("width", "100%");
    var anchoMenu = -elMenu.width();
    elMenu.css("width", 0);
    TweenLite.set(lineas, { x: anchoMenu });

     

    • Like 4

  9. Hi @cfx

     

    GSAP is an animation engine, and does not handle rendering. You could certainly use GSAP to animate the particles in that demo, but you would still need to write all the code to handle the creation and rendering of the particles. In short, the hardest part of that demo is the rendering, and there is no easy way to do something like that. The amount of code would probably be the same if GSAP was used to handle the animations.

     

    The biggest problem I see with that demo is that it's using a 2d canvas to do 3d rendering. It's doable, but far from optimized. It would be much easier, and faster to create something like that using three.js. Once you have something that can be rendered in three.js, it's very easy to animate it using GSAP.

    https://threejs.org/

    https://github.com/mrdoob/three.js

     

    • Like 4

  10. 4 hours ago, shaunhurley said:

    I've included a fork of the GSAP hit test demo as a codepen, and I've also added a couple of console log statements that show that the element being dragged is being assigned the additional "highight" class, but the visual effect isn't seen.

     

    You need to think about what the loop is doing. It's running a hit test on EVERY element, so adding a class will only remain if the last hit test you run is true. If you drag something over the first element, you'll see that your code works. The loop is running backwards, so the first element is the last one you hit test.

     

    To fix the problem, you need to stop running the loop on the first hit test that is true. You can stop a loop by using a break statement.

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break

     

     

     

     

    • Like 4
    • Thanks 1

  11. I thought your circle based camera was pretty creative. Unfortunately, it won't for every situation.

     

    Understanding how the camera I made is pretty simple. There are 3 components that you need to deal with. 

    • The viewport. The viewable area. What you can see. Basically a container, with overflow: hidden on it. 
    • The world. It should be larger than the viewport, and is the parent container for everything.
    • The target. What you want to follow. It moves around the world.

    And the rest is basically just knowing how to center a rectangle inside another rectangle. For those that don't, or need a refresher...

     

    // Coordinates to center the smallBox inside the bigBox
    var x = bigBox.width / 2 - smallBox.width / 2;
    var y = bigBox.height / 2 - smallBox.height / 2;
    
    // Or even simpler
    var x = (bigBox.width - smallBox.width) / 2;
    var y = (bigBox.height - smallBox.height) / 2;

     

    We want the target to remain in the center of the viewport, so every time it moves, we'll need to update the camera. So start off by figuring out the coordinates to center it, just like above.

     

    The target is moving around the world, so we can't move the target to those coordinates. Rather, we need to find out how far away the target is away from those coordinates, and then move the world by that difference. That will move the target into place, and now you have a functioning camera!

     

    var x = (viewport.width - target.width) / 2;
    var y = (viewport.height - target.height) / 2;
    
    var dx = x - target.x;
    var dy = y - target.y;
    
    world.x += dx;
    world.y += dy;

     

     

    • Like 2

  12. On 1/10/2018 at 10:38 AM, DD77 said:

    @Jonathan thanks, yes I've seen it, but not sure I can replicate that with a hover state. Is it possible with gsap? 

    I've seen this from @OSUblake https://codepen.io/osublake/pen/WQyBJb?editors=1010 but still on hover? is it possible?

     

    What makes you think animating something on hover would be hard?

     

    You can do some interesting stuff with SVG filters, but there's only a handful of them, and they can suffer visually due to aliasing issues. I made that ripple animation with SVG just to see how it would look, but it was originally done with PixiJS.

     

     

     

    If you're looking to bend, twist, and distort stuff for an animation, then you should definitely check out PixiJS. They have tons of filters that can do all sorts of craziness, and they're constantly adding new ones. I just noticed some new ones have been added over the past couple of weeks. 

     

    💥 AdjustmentFilter
    💥 CRTFilter
    💥 GlitchFilter
    💥 ReflectionFilter
    💥 KawaseBlurFilter

    💥 RadialBlurFilter
    💥 MotionBlurFilter
    💥 OldFilmFilter 

     

    Go through and play around with all the filters here. You should be able to find several filters that could be used for your project.

    http://pixijs.io/pixi-filters/tools/demo/

     

     

    And to help out, GSAP has a plugin to make animating things in PixiJS much easier.

     

     

     

     

    • Like 4