Leaderboard

Hi @gab Welcome to the forum. That demo looks pretty good to me. I'd recommend following along with that article and implementing it the way they did. It will give you a lot of control. That being said, you can make it work with MorphSVG too. I put together a quick pen for you to see how it could work. I just drew out a quick blobby path that I wanted for the mid-point of the animation & then duplicated that path twice - once for the start and once for the end. By duplicating the master, the clones will have the same number of points and that makes it easy for MorphSVG to perform the calculations. For the start and end paths, I just squished down the points and placed them slightly outside the viewBox. I manually duplicated a few copies of the start path so we could stagger some colors, but you could create a loop and clone those if you wanted. Here's the result. It's not exactly the same as the referenced demo, but it works. Hopefully that helps. Happy tweening.

Thanks for updating the demo. Definitely a little easier to follow. I'm not entirely sure I understand everything that is happening. I find it a bit strange to kill animations and then expect them to play again. Also I'm not sure why all the invalidating is necessary. The thing that seemed the most un-orthodox was a.add(el._unhoverEffect.invalidate().play(), 0); I've never seen a case where an invalidated animation was added to a paused timeline. As I said I'm still a bit foggy on this approach, so I really don't have a fix for what you are doing. All I can say at this point is that I don't think there is much to gain by moving one timeline into another and trying to re-use so many things. As you seemed to acknowledge previously, GSAP may be better suited to create the animations on the fly than to expect to re-use the same ones for all situations. As soon as you add in user interaction, it becomes very difficult to account for what state you current animation is in when the user requests a new one. Perhaps someone else will see things clearer than I do. Again, it just be my lack of understanding of what you are doing.

Yeah, I don't think that's a bug or anything - it's just that based on the bounds, there's a chance that x could come back as a super small number. So I'd just add a little conditional logic to your function, kinda like: var x = this.x; if (x < 0.0001 && x > -0.0001) { x = 0; } t2.progress(x / ...); Also, why did you think it'd take a lot more effort to wire up GSDevTools? It should be crazy simple, but perhaps I'm missing something.

Ok I got something. I created a shim which created the wiggle namespace. /* global define, self */ (function() { var plugins = { 'CustomEase': CustomEase, 'CustomWiggle': CustomWiggle, }; define('wiggle', [], function() { 'use strict'; return plugins; }); })(); Then you can add the the imports to the ember-cli-build.js file app.import('vendor/CustomEase.min.js') app.import('vendor/CustomWiggle.min.js') app.import('vendor/gsapShim.js', { exports: { 'wiggle': ['CustomWiggle', 'CustomEase'] } }) And then you can use it like this in your components. import { CustomWiggle } from 'wiggle'

Hi @Exhumator @OSUblake is the king of canvas animations. Here are a couple from his collection. I'd recommend looking through his entire CodePen profile for inspiration. https://codepen.io/osublake/ Happy tweening.

Hi @gmgurgen Welcome to the forum. I'm not quite sure what's happening there, but I do see the behavior that you mentioned in Chrome. (I'm also seeing the odd behavior in Edge). Strangely, your CodePen demo works perfectly in all browsers. Since that is the case, there has to be something different between the demo and your live site. Have you tried stripping down the live site to the same level as the demo and adding things back until that odd behavior occurs? Just a thought. I don't really have any other answers as it's hard to debug a live site. Maybe someone else sees something that I'm missing. Happy tweening.

I agree. Creating things dynamically certainly gives you more options and would probably be a better way to go. I just wanted to show that it was possible with MorphSVG as you mentioned it in your original question. I'm not sure you necessarily did anything wrong with your SVG. You probably just didn't quite see the morph behave the way you wanted it to. MorphSVG is an amazing plugin and not needing the same number of points is pretty incredible. That being said, there's no reason not to try and help it as much as possible. In my demo I have the same number of points on each path all cloned from the same master. If you can carefully plan your morphs while creating your artwork, you'll almost never seen undesirable behavior from the plugin. Happy tweening.

@GreenSock Hi Jack, thanks for the insight, absolutely brilliant. In regards to GSDevTools, I was speaking in regards to myself implementing the code, JavaScript is a bit of an illusive creature in my mind, if you asked me to do a complex Tween, I could probably pull it off. But ask me to use JavaScript to build something from scratch, I struggle to do so. Google is my life line Anyways tnxs again Jack, your support is awesome!!!

Excellent, thanks for letting us know. It's always nice to have the solution here so that others can benefit in the future. Happy tweening!

That's correct. You can't animate the SVG elements with JavaScript when you add it via <img>. You need to have it inline or inject it. Similar thread here: Hopefully that helps. Happy tweening.

Hi @DeuxAlpha Welcome to the forum. I'm not familiar with Inkscape so I have no idea how to control its SVG export settings, but you can always drop your SVG into a clean-up tool like SVGOMG https://jakearchibald.github.io/svgomg/ I'm not sure if you're just presenting minimal code in your question, but neither code snippet would actually draw a circle as you're missing some attributes. At a minimum you'd need a radius for the circle and usually a cx/cy if you don't want it at 0,0. Hopefully that helps. Happy tweening.

You don't need any clickTag for Adwords. Adwords makes the entire banner clickable by default.