OSUblake last won the day on January 21

OSUblake had the most liked content!


  • Content count

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. Easing to Y position set on mousemove?

    Hi @Noturnoo I saw your question on Pixi's forum about smoothly following the mouse. The videos above explain how LERP and easing work, which is what Ivan wanted you to lookup. To get your animation working, you need to change the position of the circ and displacementSprite. And he posted the wrong math function. It should be Math.pow() instead of Math.exp(). app.ticker.add(function(delta) { const speed = 0.1; const dt = 1.0 - Math.pow(1.0 - speed, delta); const position = circ.position; const target = app.renderer.plugins.interaction.mouse.global; if (Math.abs(position.x - target.x) + Math.abs(position.y - target.y) < 1) { position.copy(target); } else { position.x += (target.x - position.x) * dt; position.y += (target.y - position.y) * dt; } displacementSprite.position.copy(position); }); For a smoother looking "bubble" effect, you could use a BulgePinch filter instead of a Displacement filter. http://pixijs.io/pixi-filters/tools/demo/ https://github.com/pixijs/pixi-filters And I noticed in your demos that you're using the "lastest" version of GSAP, but that is no longer updated. You need to replace "latest" with a version number. // Bad https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js // Good https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js https://cdnjs.com/libraries/gsap
  2. Safari can't animate defs

    Nice! For some pattern inspiration, you should check out Yoksel on CodePen. She does some pretty crazy stuff. https://codepen.io/yoksel/ @Dipscom too. I know he has some good pattern animations buried somewhere on CodePen. https://codepen.io/dipscom/
  3. 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
  4. 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.
  5. Easier Animations in Angular 1.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
  6. Easier Animations in Angular 1.3

    Creating dynamic animations in Angular 1.3 has dramatically improved. You no longer need to inject a service or access your scope to get values for your animation. All animation methods now have an options parameter where you can pass in values to your animation modules. There is also a new inline animate method where you can pass in from and to values and no longer have to deal with toggling a CSS class name. // In a directive link: function(scope, element, attrs) { scope.moveToMouse = function($event) { var from = { autoAlpha: 0, x: 0, y: 0 }; var to = { autoAlpha: 1, x: $event.pageX, y: $event.pageX }; $animate.animate(element, from, to); } // In your animation module animate: function(element, className, from, to, done) { TweenMax.fromTo(element, 0.5, from, to); done(); } Here's a simple demo of that code in use http://plnkr.co/edit/midHzP?p=preview And a more involved demo showing how to flip a card in the direction of the mouse and creating random bezier curves Demo: http://embed.plnkr.co/CIiLR4/preview Code: http://plnkr.co/edit/CIiLR4
  7. Safari can't animate defs

    I'm also wondering if a pattern might work here. https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns
  8. Safari can't animate defs

    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.
  9. Safari can't animate defs

    Any reason for doing it like that? My advice for SVGs, don't use <use> ever. It can be really slow, and super buggy.
  10. Particle Ball

    Nice! You should also check out this thread for a simple three.js plugin.
  11. GSAP & Canvas - for loop overwrites tweens

    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.
  12. Adjusting the speed/duration of animations dynamically?

    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.
  13. Bezier curve tween not happening from transform center

    You're placing a bunch of unnecessary restrictions on your animation. And I see transforms in your html that do the same thing as xPercent/yPercent. Transform origin does not affect x and y. If you want to move something from the center instead of the top left corner, then offset your points half the width and height of the object your animating.
  14. Apply effects of draggable to another.

    The trigger property might be what you're looking for.
  15. Adjusting the speed/duration of animations dynamically?

    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.
  16. Using GSAP (TweenMax) on css varabiles

    Hi @danehansen You might be looking at that wrong. In browsers that have implemented will-change, animating scale is going to behave a little different than other transforms. https://jsfiddle.net/OSUblake/h8j24tn4/
  17. GSAP + Canvas Particle animations

    Hi @Bartonsweb Sorry for the delay. I've been out of town for over a week, and didn't get a chance to check out the forums. I'll make that demo this weekend.
  18. Modification of OsuBlake's Bezier Connector

    My circles are set to cx="0" cy="0", so there is no need to find the center. All the x and y movement can be read from the _gsTransform object.
  19. GSAP & Canvas - for loop overwrites tweens

    I don't know what the code looked like before, but changing the width or height of a canvas erases everything and resets any changes made to the context.
  20. First click doesn't trigger sub item animation

    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 });
  21. Hehe. Yeah, your planet is wiggling because you're animating the width. If you rework it to use scale instead, it will be smooth.
  22. Moving Element to a Position's Relative to Container

    It's hard to say without knowing what you're doing, but figuring out the actual offset might be better than messing with the transformOrigin.
  23. Particle Ball

    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
  24. Modify class of element while being dragged

    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
  25. 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;