Jonathan

Hello Fellow GreenSockers, Well its that time again, The Mighty @Carl has just made and posted another great video tut about: Easy SVG Drag & Drop with GreenSock Draggable Keep in mind if you haven't done already please subscribe to the GreenSock Learning YouTube Channel so you don't miss out on this goodness. https://www.youtube.com/channel/UCFPckx3BFK_GvJag82CjDlg And here are the codepen to boot: Happy Tweening

Hello @Massimiliano Aprea and welcome to the GreenSock forum! As far as making sure your animations pause when you switch browser tabs. You can always use the HTML5 Visibility API, so when you switch tabs you can trigger a pause on your tween(s) or timeline. And then resume the tween or timeline when you give the active tab focus. Like in this example which pauses the animation when you focus out of a browser tab, and then when you give the tab focus again it will resume the animation. Keep in mind that the example also checks for when browser window is focused in and out since that doesn't use the HTML Visibility API, which only works with browser tabs not un-docked browser windows. Also Like @OSUblake advised we can help you better if you provide a reduced codepen demo example so we can see your code in context in and editable environment. Happy Tweening!

Hello @mackay2588, and welcome to the GreenSock forum! When i go to your page I got redirected like @Carl did. Thanks @OSUblake for providing the right link. But when i go to the right link I see errors first thing in the browser console. jquery.mobile.js:3337 Uncaught TypeError: Cannot read property 'concat' of undefined at jquery.mobile.js:3337 at jquery.mobile.js:3814 at jquery.mobile.js:22 at jquery.mobile.js:22 jquery.min.js:2 jQuery.Deferred exception: Cannot read property 'top' of undefined TypeError: Cannot read property 'top' of undefined at animateDiv (https://mackay2588.github.io/scripts/randomMove.js:31:33) at HTMLDocument.<anonymous> (https://mackay2588.github.io/scripts/randomMove.js:9:9) at l (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:29375) at c (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:29677) undefined jquery.min.js:2 Uncaught TypeError: Cannot read property 'top' of undefined at animateDiv (randomMove.js:31) at HTMLDocument.<anonymous> (randomMove.js:9) at l (jquery.min.js:2) at c (jquery.min.js:2) dbLogoB&W.png:1 GET https://mackay2588.github.io/dbLogoB&W.png 404 () You might want to also handle those console errors. But like Blake advised above you might want to use x (translateY) instead of using top. And reduce the amount of animated elements. I have also seen with that particles.js library being a great resource hog, especially on mobile draining my battery. Just my two cents

Hi @Pete Barr Are you making sure all images are loaded before animating them. Meaning only run your GSAP or any JS code once the DOM is fully ready and teh window is loaded to prevent jank. For example: // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { // wait until all images, links, CSS stylesheets, media assets, and fonts are loaded window.addEventListener("load", function(event) { // place custom JS code here }, false); }); But for better help I would recommend you share a limited codepen example so we can test without shooting blanks. Happy Tweening

Hi @Pete Barr and Welcome to the GreenSock Forum! You can also try running your SVG code through this online SVG Optimizer, which can help clean up SVG code that might be causing an issue. https://jakearchibald.github.io/svgomg/ Happy Tweening!

i'm surprised during that Microsoft presentation that Chrome didn't install as well, since Chrome has taken the mantle as the new IE.

Hi @Shaun Gorneau, You can tween a background image when animating image sprites or doing say a ken burns type of effect for an image using background-size. But usually the limitation falls short due to some browsers not doing sub-pixel rendering. For example, i used to be able to force autoRound to false and I would see Firefox and or Chrome animate on a sub-pixel level for values of background-size and background-position without pixel snapping, even though it would not render with GPU. But now it seems to be intermittent in honoring autoRound:false. I prefer animating transforms like scale for images like @OSUblake said above, but there are a lot of uses for animating a background image, it just depends what works for each project. Thanks for this solution @GreenSock Jack! Thanks guys i just signed up for that Slack - Animation at Work. Just my two bits

Hello @thomasfoskolos and welcome to the GreenSock forum! Here is an example of animating a CSS pseudo-element using the GSAP CSSRulePlugin. Keep in mind that when using GSAP for this you have to use the old CSS syntax using only one colon (:) instead of the new double colon syntax (::). To target multiple <h1> tags individually you either have to add a unique id or class to each <h1> tag. Or target them by their index or in CSS :eq() or :nth-child. The below example shows animating two <h1> tags, each rotating but at different times. More info on the CSSRulePlugin Docs: https://greensock.com/docs/Plugins/CSSRulePlugin Happy Tweening!

Hello @keepRunning and welcome to the GreenSock Forum! Yeah browsers wont even let you style specific CSS for <option> HTML elements. Chrome or other webkit based browsers used to allow CSS to style both <select> and <option> elements, but they have been pretty poopy pants about styling <option> tags lately. So the browser will reject certain CSS properties for visual, layout, and transforms on <option> tags. The HTML DOM interface won't allow it. The browsers only allow things like font-size, font-family, font-variant, font-style, color, background-color, background, etc like Blake said above When i look at the spec for <option> tags there is no mention of this https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement https://www.w3.org/TR/html50/forms.html#the-option-element Only other route is like Sahil advised is where the original <select> tag is hidden. And then you create a custom dropdown with animated option tag using <ul> and <li> tags.. or use a jQuery UI dropdown select that is jQuery custom HTML. Happy Tweening!

Hello @Githubish and welcome to the GreenSock forum!, I know I'm jumping in late.. I didn't have time to mess with this right at this moment. But you can achieve this star shape vs the traditional circular shape of the carousel, by messing with the existing math for each <figure> so the rotateY() is adjusted with the angle you want. And then compensate the translateZ() to be adjusted based on the new rotateZ() angles position. I messed with this in the browser, but I suck at math on the fly without trial and error with limited time. But like @Carl advised a codepen actually showing this in action would go along way in helping us (the GreenSock community), see what this is supposed to look and animate like. Happy Tweening!

Hello Fellow GreenSockers, GreenSock has a new video: QuickTip: Try Club GreenSock bonus plugins for free See how you can try any Club GreenSock bonus plugin (MorphSVG, DrawSVG, ThrowProps, etc) for free in CodePen . This video tut was made by the Mighty @Carl, please take it away again Carl: If you haven't already done so, please check out and subscribe to the GreenSock Learning YouTube channel for more video tutorials. This way you don't miss out on new features and great learning videos from GreenSock. Happy Tweening!

Nice post, .. but you lost me at scalloped: yuck

Thanks for posting the above codepen with the video links @OSUblake

@GreenSock Jack.. I would love to see Bendy Box get some more love, and put on the front griddle. I think it would bring other people into using GSAP, and then they can always move into more advanced custom stuff that you can do with GSAP. Kind of like letting them get their feet wet before they jump into the deep end. But that's just my two bits.

Hi @Saul Rosenbaum and welcome to the GreenSock Fourm! Don't be too hard on yourself. That dreaded /latest/ in the TweenMax JS script has taken a shark bite out of many. At least you were able to figure it out and get it all sorted! Happy Tweening!

Yes i was thinking the same thing.. ( but kept my big mouth to myself ), Why not just use TweenLite or TweenMax, instead of the jquery.gsap plugin as @GreenSock Jack suggested. It will allow you to have more control and less jquery conflict city

Hi again @srmark, If you look at that stackoverflow article .. They first include the 1st jQuery plugin... then they are caching the original function name inside a new variable and then deleting the original function. Then including the 2nd jQuery plugin script after that new variable and delete. So order matters in this technique. Their not having to go and modify what is inside the jQuery plugin. https://stackoverflow.com/a/11901144/1203457 This other stackoverflow link goes over the same situation with conflicting function names of two separate jquery plugin function names. But in this case it is bootstrap jQuery plugin and the jQuery Ui plugin with the same function name inside of them. They do the same thing as above with no delete, and with no need to edit inside both of the jQuery plugins: https://stackoverflow.com/a/12551707/1203457 Also you could use a closure wrapped around your calling of one of the jQuery plugin so there is no conflict. (function(j){ // use j as alias of the factory symbol $, which is an alias for jQuery })(jQuery); Or you can check out this JQuery learning page on what they recommend for conflicts like this, they go over the closure and no conflict: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/ And this link .. Use An Immediately function expression: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/#use-an-immediately-invoked-function-expression

Hello @srmark and welcome to the GreenSock Forum! This stackoverflow post might help you: https://stackoverflow.com/questions/11898992/conflict-between-two-jquery-plugins-with-same-function-name Happy Tweening

Hello @Anya and welcome to the GreenSock Forum! Keep in mind that you should be able to just use translateZ(0px) instead of translateZ(100px). Using the translateZ() CSS function on the parent just triggers it to be on its own rendering layer. Which changes the stacking context by the mere presence of that CSS property on the element. Which also sometimes negates the use of having to use CSS perspective on the same element with translateZ() values other than 0px, to prevent artifacts. Happy Tweening!

@jesper.landberg .. When I use that progress trick i don't count on it for smooth 60fps, it just helps with initial cost up front. In my above replies, I also mention that it depends on getting all the correct CSS properties to play nice cross browser, so it is just one cog in the wheel. With browsers like webkit browsers like Chrome, Safari, and MS Edge constantly changing how CSS properties render, its not written in stone. Sometimes you have to do the opposite to get smoothness, so it is like Blake said you will have to play around and see.

Oh I see.. I understand your understanding, that makes sense. We were both talking about different munchkins varieties in the same Dunkin Donuts box. I was focusing too much on trying to get 60 (fps) munchkins in my mouth at once as fast as I can.

I still love ya Blake

Its not a trick, its just about precalculating values to get 60fps. I'm not taking it out of context. I am talking that exactly from his post. This whole CSS thing is not new to me. He's updated the article since but its pretty much the same when he first introduced it. Its just a model to follow, which GSAP already does the precalculation for you. Even thw point of his article ws to get smooth animation with no jank. In my opinion FLIP is great if your not using CSS transitions and the Web Animation API. It taps into those CSS transition events. Its still doing that expensive cost within that 100ms. But with GSAP you can take that FLIP model like you have done, but GSAP is still doing the expensive calculatoons for you up front. Great codepens and I understand what you mean? But your missing my point, and taking it out of context ( pull hair now ). We are both talking about different aspects of FLIP. Your talking about one part of FLIP with Invert. I am talking about the whole of all parts. which is to precaluate to get smooth 60fps.

FLIP is a simple and not a complicated concept. The FLIP technique is all about pre-calculating the values up front. So you dont have to do all the expensive precalculations on each frame so you can achieve 60fps. GSAP does all that for you in the beginning. Its all about getting it SILKY SMOOTH.. No Jank! Paul Lewis's definition of FLIP Its all about getting that 60fps.. the buttery goodness. But precalculating is not the only thing you need, it doesn't guarantee 60fps. You still need all the correct CSS properties to play nice cross browser. This way you achieve 60fps and have it be the same cross browser

Thanks for the heads up @Lasercode, I had the -webkit-background-image commented out for the CSS rule #demo that was causing that. I just had to un-comment it out and swap the blue and yellow in the CSS rule. It was commented out due to how Chrome constantly changing the way the new and old syntax work for linear-gradient. You should see it work as it should in both Chrome and Firefox. Happy Tweening!