Dipscom

I think he's asking if someone has recreated those animations using GSAP. Or some similar set of animated icons.

Thank you Jim, May you have a happy holidays a great new year and code with few bugs.

Why do you need to add a .call()? You can define a onCompleteScope property, wouldn't that work in your case? http://greensock.com/docs/#/HTML5/GSAP/TweenMax/ --- Ah, sorry Blake, it is hard to see if someone's answering the thread when on a mobile phone.

Currently you have the code that calls for GSAP (6-layout.js) before the GSAP CDN link. Maybe that's the root of your problems?

Just wishing you luck in finding someone, Jon. I'm everything you don't want a freelancer who's not in NY so, I will walk away now and hide in the shadows.

Hey Marshmallow, I was having a look at this and was considering having a stab but I can't really grasp your structure from just reading the JS. If you setup a little pen, just like Marshmallow suggested I would definitely see if some lines could be shaved off it.

Sometimes the answer is so simple and obvious it escapes our notice... Your "running shadow" happens because you have the following in your moveBack call. ease: Elastic.easeInOut Can you see why you have the "running shadow"? Don't worry if it doesn't hit home straight away, it took me a rather long while wading through the code before it clicked. That just reinforces my previous comment on having a super simple test case when trying to troubleshoot. All those settings, objects and variables made reading the code a slow process and quite noisy when trying to isolate what did what. But in the end, we got it. Mystery solved.

Hey Marc, I haven't been at my office much these days, it's where my test machines are. I'm a tad curious about this attr:{x:val} thing in Edge and IE, will be having a look when I have a chance. Let us know if you come up with something before that.

Ehrm.... Ehrmmmmmmmm..... Now, now people. Here we are again, this moderator gang hijacking threads... Shame on you lot. Blake, the moderator badge is your fault. You dangled a carrot in front of me and I made a little comment to Jack. Next morning, I have this crushing responsibility on my shoulders and a migraine. I am well aware you are all in cahoots in this. I wasn't aware of this lime green Ferrari! I was promised a glass of milk and a biscuit! 0.0 I'm still behind you, better watch your back. I'm catching up. Two weeks holiday you said? Better take your laptop with you. (thank you) Now, we really should stop with this hijack... Or Mr. Jack GreenSock himself is going to throw lightning in all of us.

To follow up on what PointC has already said. The sad truth is no. It is not possible. All email clients will strip most of your code away to different degrees and that's talking about CSS. JavaScript is still a big NO-NO in email land. Some email clients won't even show an animated GIF. If you must have animation, the only way to have a guaranteed delivery is to have it hosted somewhere else outside the email then, send the link to it. Which, in a way is not great because it really just looks like a phishing scam.

There you go. You lot got it all sorted amongst yourselves.

Thanks for the heads up gmullinix, I'll be passing this over the the overlords, someone will come by with an official comment/update asap.

Yes it would be, remember you are rotating the inner circles. SVG is rather confusing when it comes to that because of its viewBox attribute and how it behaves, I can't go over it in detail now as I'm away from the computer but once I have a chance, I'll link to a couple of blog posts that describe the viewBox and its behaviour.

That's expected behaviour. The long story short is that GSAP uses x and y as a proxy to transform translate(), they are not the same thing as the x and y in SVG, when you tween the x and y in your pen, you are really overwriting the transform rotate() with new values. You can do one of two things, reposition your inner circles using transform translate() or use the attrPlugin like so: TweenMax.staggerFrom(menuItems, 2, {attr:{cx:2000, cy:2000}, autoAlpha: 0, ease: 'Power4.easeOut'}, 0.5); Does that help?

Not really sure how to help you bevial.

Hi bevial, What are you referring to when you talk about jerks in the video? I don't really see any jerking or janking. I am assuming the video part is the explosion in front of the xmas tree. The only thing I see odd in this banner is the fact that the explosion starts then waits a long moment before being removed.

Hey marcmorales.ca! Welcome to the forums! Have a read about my adventures here: http://greensock.com/forums/topic/13423-svg-pattern-transform-browser-compatibility/ It might have something for you there. At the very least it has a little summary of what I found out when experimenting with patterns.

Nice one violacase. That's a very handy site. It got such traction that another one for JavaScript spawned (but don't say it out too loud, one can die by stoning here if heard dissing JS).

Hey Robert Wildling, I'm not stalking you... Its just that I tend to do a round of posts every so often and respond to the ones I can all one after the other. I'm a bit tight in time these days so, in the absence of someone else saying something, I was wondering: is this the simplest code for this effect? With all these settings and variables, makes it for a long complicated read. If you could reduce this to the simplest animation loop, I would be very grateful. If not, there are others around who I am sure will be more than happy and might have the time, to go over all your code.

CSS filter effects have a good support when we're talking DOM elements. The topmost SVG is a DOM element but, the elements inside an SVG are not. And those elements, don't have good browser support yet. I looked at your example pen in Chrome, Safari and Firefox, but was only able to see the drop shadow in Firefox. If you look at the bottom of the article from MDN I linked, it shows a table of current support. You will see the distinction between DOM elements and SVG elements. Unfortunately, caniuse.com is not the "be all end all" reference for all elements/properties. It is a great starting point but, like everything in the world, it has limitations. You are correct. It doesn't require setting anything on the SVG. It does, however, need to be setting somewhere to allow GSAP to read its properties and make the correct calculations. Like, in the external CSS or even in the inline CSS. For example: .c-logo-svg { display: block; position: absolute; top: 10vh; max-height: 80vh; width: 392px; left: calc((50% - 169px)); opacity: 0.5; transform: scale(0.5); filter: drop-shadow(0px 0px 0px white); }

As a rule of thumb, you should limit using .from() tweens to only the first tween of the element, it really can cause confusion and not pleasant behaviour. However, if you must work with it, for whatever reason that might be, you just need to grasp the immediateRender property and how GSAP works with it. Carl does, as always, a great job of explaining it all in the following video: It should set you on your path.

tl.add("slindeMoves", "-=0.5"); *Magic*

Hey Robert Wildling, There is one issue with your setup. You're animating a property but the property is not defined in the SVG so, in the first run of the animation, things look a bit wonky, after that, all seem to work as expected. Try adding a default filter value to the CSS or the SVG so that GSAP can calculate the initial parameters correctly. After you add that, you should be able to tween it without the need of an onUpdate method call. Also, I assume you are aware this filter effect on SVGs is only currently supported in Firefox. https://developer.mozilla.org/en/docs/Web/CSS/filter

It's not that much of a hack. I can tell you why it works that way, though. It's like what I said in the previous post, you have two timelines trying to control the same animation but no way for them to communicate between them. This time, you are interrupting the first one as you were before but this time you are telling the second one to start at a particular point and end at a particular point. And also, this time, you are creating the second animation every time there is a hover over. It should still work without recreating it every time. The ideal scenario here is for you to create one timeline for the first animation and another for the secondary animation then, a third master timeline that controls the other two.

Brilliant! Hope all works. If it doesn't, well... We'll be here