Leaderboard

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.

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

Most of it was straight forward, just had to create draggable slider and do same thing with it as jQuery slider.

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

Hi @benoit, super ... - I like it! Best regards Mikel

with x attr :

Hi @jamesg, You have a lot of possibilities. Use the hints of @OSUblake. Here is a little suggestion: Happy morphing ... Mikel

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

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

Here is demo with ScrollMagic. It has really easy learning curve depending on your experience with GSAP. Link to video tutorials: https://www.youtube.com/watch?v=QpedXxC0e5o&list=PLkEZWD8wbltnyDKWAgQfRDP_l0BC-zlU- Link to examples page with enough examples to do almost everything: http://scrollmagic.io/examples/basic/responsive_duration.html Though ScrollMagic is getting out of date so you may want to look for other methods and libraries, following thread discusses different approaches.

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/

Check this thread.

@OSUblake 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 was sure an example of this existed but it appears you can't search this forum? Regardless, I appreciate your input despite my lack of demo and it provided a solution to another potential problem I was having. @mikel Thank you for providing the demos, I hadn't considered scaling but that is a great, simplistic, solution - I got too hung up on the MorphSVG plugin to consider obvious alternatives.

Hi, some time ago - a 'fork' of a German Havard Business Manager cover: Happy morphing ... Mikel

it's fun and OK for Safari !

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

@Sahil I took onboard what you said in regards to incorporating draggable and replacing jquery UI, I am just trying to work out a couple of issues and finding the best way to do it. 1. In my current example you will see that have have attached the timeline to the draggable knob, however you can see that it falls quite short in expanding fully within the container i am not sure how to do this, so any examples would be most useful. 2. I also want to bind the knob on the draggable to the playing of the timeline (similar to how jquery UI works) again any examples will be helpful I appreciate, your help on this, my JavaScript memory is very very very slowly coming back to me many tnxs bromel

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.

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

Nice! You should also check out this thread for a simple three.js plugin.

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.

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.

The trigger property might be what you're looking for.

setTimeout(()=> { TweenLite.to(window, 2, {scrollTo:{y: 200}}); }, 0); Actually my issue was that I was cloning a lot of elements in the DOM, so the scroll fired before the DOM had finished cloning. Enclosing this in a setTImeout ensured that this fires all the time.

Yep. You can use the ModifiersPlugin for that. Check this out... If you're curious, most of the demos I made for the ModifiersPlugin are based on techniques shown in these videos. The author, Keith Peters, uses canvas, but the concept is still the same for DOM elements. EASING AND TWEENING PART I EASING AND TWEENING PART II Those videos build off of these videos... NORMALIZATION LERP MAP

Like this? Using the modifiers plugin