Jonathan

Hello, Here is a list of browser support for transform 3d: http://caniuse.com/#feat=transforms3d Here is a function that checks if the rotate3d() transform function is supported: // Check for Transform3D support - rotate3d() function hasTransform3D() { var div = document.createElement('div'), transforms = { 'Transform': 'transform',// default 'WebkitTransform': '-webkit-transform',// chrome and safari 'MozTransform': '-moz-transform',// firefox 'OTransform': '-o-transform',// opera 'MsTransform': '-ms-transform', // ie 'msTransform': '-ms-transform',// ie10 'transform': 'transform' // ie10 other build }, has3D; document.body.insertBefore(div, null); for(var t in transforms) { if(div.style[t] !== undefined) { // change this to the CSS transform sub property // your checking the browser against div.style[t] = "rotate3d(0,0,0,90deg)"; has3D = window.getComputedStyle(div).getPropertyValue(transforms[t]); } } document.body.removeChild(div); var output = (has3D !== undefined && has3D.length > 0 && has3D !== "none"); return output; } and this is how to use it: // usage var hasRotate3D = hasTransform3D(); if(hasRotate3D){ // rotate3D is supported } else { // rotate3D is NOT supported } With this function you can change the CSS style transform function you are testing against.. in this case it is testing for rotate3d(0,0,0,90deg). rotate3d(x, y, z, angle) The above function could also be modified to check for various CSS transform 3d functions like translate3d, scale3d, skew3d, etc.. I hope this helps!

Hello Mike.. Have you tried setting the left property to -300px after the class is removed, using the onComplete special property: TweenLite.to(".myelement", speed, { className: "-=default", onComplete:function(){ TweenLite.set(".myelement", { left: "-300px" }); } }); See if that helps.. If not, can you please setup a limited codepen or jsfiddle with an example of your issue.. thx

Thank you Carl ! I fixed the typo, hash in the getElementById(). Thanks for pointing that out, I guess my brain was still asleep when I posted my answer. I should have waited before I had my Thanksgiving dinner Happy Thanksgiving!

what about using killTweensOf() and then run it in a for loop: http://api.greensock.com/js/com/greensock/TweenMax.html#killTweensOf() try this example: http://codepen.io/jonathan/pen/ukJmE var box = $('#box'); box.click(function(){ var container = $("#container"), i, particle; for (i = 0; i < density; i++) { TweenMax.killTweensOf( document.getElementById("particle" + i) ); } }); or you can target the .particle class http://codepen.io/jonathan/pen/wnrok var box = $('#box'); box.click(function(){ TweenMax.killTweensOf( $('.particle') ); }); see if this helps !

Hello again.. When I develop for Joomla i try to avoid the Frameworks since there are too many , like 10 Joomla template frameworks. Gantry, Warp, Gavern, Zen Grid, Helix, Construct Template, Morph, JV framework, Wright and our T3 framework. (I think out there are even more). Becuase each Template developer wants to show there Joomla Framework is better. That is why for me i like Wordpress better than Joomla, but that is my personal preference. So my question to you is: Are you even using the Joomla T3 Framework? Can you post your custom JS code you are running in Joomla that you say you are having issues with. So this way we can see what your custom code looks like with all your Tweens, so we can better help you? Joomla by default uses the MooTools JavaScript library. jQuery is a secondary JavaScript library so that is why Jamie and I were advising on the conflicts about the factory symbol $. MooTools has ownership of the factor symbol. Whats happening is.. if you look at the order your JS scripts get loaded. You will see this as the order: jquery.min.js jquery-noconflict.js jquery-migrate.min.js mootools-core.js Notice how mootools-core.js is last. What is happening is that jquery.min.js core gets loaded first and then jquery-noconflict.js. So when mootools-core.js loads it takes over the factory symbol. What you can try is to see if you can control where the jQuery scripts load, either in the head or before the body, so its after the MooTools mootools-core.js. I know Wordpress allows you to control where you want your JS script loaded. You say that your animations have stopped, when all Joomla files are up to date. Why not have your Joomla Site up to date with all the latest files. And then make your custom code with tweens reference any jQuery $() factory symbol with jQuery(). So what you can do when working with Joomla and jQuery is instead of using $() use jQuery(), and you wont have the $ conflict. So this way you are always using jQuery() to reference the factory symbol, instead of $(), and then you dont have to worry about conflicts. If you dont use jQuery() then you have to use jQuery noConflict() again before your jQuery custom code. http://api.jquery.com/jQuery.noConflict/ <!-- Another way to put jQuery into no-conflict mode. --> <script src="mootools-core.js"></script> <script src="jquery-min.js"></script> <script> jQuery.noConflict(); jQuery( document ).ready(function( $ ) { // You can use the locally-scoped $ in here as an alias to jQuery. $( "div" ).hide(); }); // The $ variable in the global scope has the mootools-core.js meaning. window.onload = function(){ var mainDiv = $( "main" ); } </script> Either you have to use jQuery.noConflict() before your custom jQuery code, or always have to use jQuery(), instead of $(). And then you wont have the issues your seeing in Joomla. I hope this helps!

Hello and Welcome to the GreenSock Forums! Happy Thanksgiving! Is there a way you can setup a limited codpen or jsfiddle example so we can see your html, js, and css in context of your issue? Where are you calling the killChildTweensOf() method in your code? Also have you tried using the document.getDocumentById() to reference the ID on the element to kill the Tween.TweenMax.killChildTweensOf( document.getElementById('container') );Once you post your example code we can see where you are calling the killChildTweensOf() method, to track down why its not killing your animations.

Hello and welcome to the GreenSock Forums! This doesn't look like a GSAP issue. But there are a number of things you can try adding Anthony: you could try just animating scale(), since your animating both scaleX() and scaleY() with the same value. Use force3d:true in your to() tween.. so you can have GSAP apply the transform matrix3d() on your element.. which will kick on hardware acceleration for smoother CSS animations. Add translate3d(0,0,0) to your CSS style sheet, that is another way to tell the browser to use hardware acceleration. translate3d(x, y, z); ... And since translateZ values are both 0, you wont need to animate them in your tween since the value is always 0. Also adding position:absolute to your transformed element, this one is very important take a look at this example: http://jsfiddle.net/Nt9Hw/13/ JS: $(document).on(' mouseenter','.test-gsap',function() { TweenLite.to($(this), 0.5, { scale: 1, force3D:true, ease: Power4.easeOut }); }).on('mouseleave', '.test-gsap', function() { TweenLite.to($(this), 0.5, { scale: .95, force3D:true, ease: Power4.easeOut }); }); CSS: #wrapper { position:relative; width: 225px; height: 148px; } .test-gsap { position:absolute; width: 225px; height: 148px; background-image: url(http://placekitten.com/225/148); -webkit-transform: scale(0.95) translate3d(0,0,0); -o-transform: scale(0.95) translate3d(0,0,0); -moz-transform: scale(0.95) translate3d(0,0,0); transform: scale(0.95) translate3d(0,0,0); } HTML: <div id="wrapper"> <div class="test-gsap"></div> </div> the wrapper div is there so when you absolutely position .test-gsap it will be relative to the #wrapper div and see if it helps!

Hello Fanho.. Glad to hear TweenMax is working again! It looks like that the off-canvas.js is still having issues .. The Joomla T3 Framework has its own jquery.noconflict.js that is used with T3 Framework.. and off-canvas.js is part of the T3 Framework. Have you tried updating the T3 Framework? Do you have the latest T3 Framework for your version of Joomla? When i look at the latest T3 Framework on git, the off-canvas.js is different than the one you are using on your site, and doesnt use jQuery $.browser(): https://github.com/t3framework/t3 https://github.com/t3framework/t3/blob/master/source/plg_system_t3/base/js/off-canvas.js

Hello.. It looks like in that example to what your trying to mimic.. he is using 4 nested spans inside the main div. And animating the height and width of each span, and then using CSS animation delays to control the timing. In your example you only have one div and a trying to animate the border instead of growing height / width of span... Carl beat me to it .. Great example Carl and FAST !!!

Hello and Welcome to the GreenSock Forums! This doesn't look like a GSAP issue.. but more of a jQuery conflict with the factory symbol $() and the removed jQuery $.browser() method from the previous jQuery version from your old site. Errors are being thrown in the console which are related to jQuery, which has caused the page to stop on that error. REGARDING YOUR OLD SITE: When i look at your old site it is throwing an error in the console regarding the factory symbol $() ReferenceError: $jp is not defined http://www.inflowmotion.net/intek/ja/business-domain-jp/sensor-jp/application-jp/parking-jp.html Line 1 TypeError: $ is not a function http://www.inflowmotion.net/intek/ja/business-domain-jp/sensor-jp/application-jp/parking-jp.html Line 1 That usually has to do with which JavaScript library conflict with the factory symbol $, the dollar symbol. So there might be another JavaScript library like jQuery that is trying to claim the factory symbol. NOTE: The factory function $() is a synonym of jQuery() function. So in case you are using any other JavaScript library where $ sign is conflicting with some thing else then you can replace $ sign by jQuery name and you can use function jQuery() instead of $(). REGARDING YOUR NEW SITE: As far as your new Joomla site and TweenMax not working... that is happening due to the jQuery version you are using that doesn't support the jQuery.browser() method. You are using jQuery 1.10.2. in Jooomla 3.2. And If you look at your console you will see that an error is being thrown. TypeError: $.browser is undefined http://www.intek.jp/plugins/system/t3/base/js/off-canvas.js Line 15 Looks like the script file off-canvas.js is trying to reference the jQuery $.browser() method, but it has been removed from jQuery as of version 1.9, and has been deprecated since version 1.3. http://api.jquery.com/jQuery.browser/ Solutions: there are a couple of things to do for this .. Either update that off-canvas.js so it uses the latest jQuery methods, since the conflict is with this script using a removed jQuery method $.browser(). Download and include in your site the $.browser method that has been ported over to a standalone jquery plugin, found here: https://github.com/gabceb/jquery-browser-plugin Or use a jQuery version 1.8, which you might not be able to do so since Joomla 3.2 came packaged with the latest jQuery 1.10.2 I hope this helps!

Awesome Carl, that did clear things up! Thanks for the tips when viewing the API... That should go along way going forward when declaring the right Constructor for speed and performance. i will keep an eye on the API docs Defined By column, and the "show/hide inherited methods" link.. to better know what Constructor is defined by what .. Thank you Carl

Thank You for replying back Rodrigo the reason i was asking is because i noticed some methods will throw an error if you try to use TweenLite constructor when TweenMax.min.js is included for example.. i notice that the staggerTo() and killChildTweensOf() throw an error when i use TweenLite constructor look at this example and have your console open to see the error thrown: http://codepen.io/jonathan/pen/LEaxw can anyone explain why it throws this error: TypeError: TweenLite.staggerTo is not a function http://s.codepen.io/pen/secure_iframe?turn_off_js=false&mobile=false Line 28 if i make the constructor TweenMax it doesn't throw the error any help as always will be highly appreciated

Hello everyone This might be a stupid question but i had to ask to better understand the JS API .. I know that when you include TweenLite.min.js in your page that you use the TweenLite constructor when using different methods in the API But lets say If i have TweenMax.min.js INCLUDED in my page: what is the best usage for using set() .. using the TweenLite or the TweenMax Constructor?Its been said in the forums that you can use either TweenLite or TweenMax IF TweenMax.min.js is INCLUDED in your page... so I was curious as far as performance and/or preferred usage.. which is appropriate to use if I have TweenMax.min.js included in my page? or can i use both using TweenLite: TweenLite.set(element, {x:100, y:50, opacity:0}); or using TweenMax: TweenMax.set(element, {x:100, y:50, opacity:0}); or can i use either or ??? Im sure that what Im asking can relate to other methods in the API, when i have TweenMax.min.js included in my page.. so any help will be highly appreciated thanks in advance !

Hello and Welcome to the GreenSock Forums! Do you have a limited codepen or jsfiddle you can provide so we can see the code you have tried that isnt working or see what your code looks like.. so we can better help you. thx

Hello and Welcome to the GreenSock Forum! If you can provide a limited codepen or jsfiddle of your code we can better help see whats going on! when you say.. you thought the skew command would work were you using the transform: skew() property ?if so.. you have to use skewX() or skewY() due to the skew() shorthand method not being supported since early drafts of the spec: https://developer.mozilla.org/en-US/docs/Web/CSS/transform Browsers that do have the skew() property will eventually have it removed in the future due to it being experimental in early drafts of the CSS Transforms Level 1 spec. thx

Thanks for the example... Looks like maybe some pixel-snapping might be happening due to sub-pixels of the computed CSS bottom property in the style sheet for #betPlacer Example: http://jsfiddle.net/m5ycR/11/ there are a number of things you can do.. var $betPlacer = $('#betPlacer'), betPlacerH = $betPlacer.height(), betSlipH = $betPlacer.children('.bet__slip').height(), betNewHeight = betPlacerH-betSlipH; // set #betPlacer bottom TweenLite.set($betPlacer ,{"bottom":"-"+betNewHeight+"px"}); $('#betOptions, #betPlacer .bet__slip').on("mouseup", function () { TweenLite.to($betPlacer, 0.35, { css:{bottom:0,force3D:true}, delay:0.25}); }); your animating the CSS bottom property.. but i noticed in your style sheet you have the CSS bottom property set to -81% #betPlacer { bottom: -81%;} instead of that you could: calculate the #betPlacer and #betPlacer .bet__slip height. Subtract the two elements height Then use the GSAP set() method to set the bottom property to the negative value of the added height. the computed bottom should be around the same: with -81% the computed is: -329.683px ( sub-pixels ) heights pre-calculated, computed is: -322px ( not sub-pixels ) so maybe the issue is when animating the bottom property the pixels are actual computed as sub-pixels when they are computed from -81%... which might be causing pixel snapping. http://dcurt.is/pixel-fitting if you were animating using translateY .. there wouldnt be an issue animating sub-pixels and it would happen on the GPU layer vs animating the bottom property on the CPU layer. you could try using force3D:true on your to() tween also i tested this on a Galaxy Tab and Samsung Galaxy S3 on Android version - 4.1.2 and it animates smooth now quick note: you dont have to use the vendor prefix's for any border-radius properties: http://caniuse.com/#feat=border-radius see if the above helps

have you seen this codepen by GreenSock? It animates particles numbers, maybe it will give you some ideas? http://codepen.io/GreenSock/pen/zrmiG also if you view this GreenSock speed test: http://www.greensock.com/js/speed.html you could try adding a border and outline transparent to remove the jaggy edges from your flakes in Firefox, and maybe have a transform property in your style sheet on that .flake rule: .flake { position:absolute; width:100px; height:100px; background:#fff; transform: scale(1) rotate(0deg) translate3d(0,0,0.1px); border:1px solid transparent; outline:1px solid transparent; } But when i view the flakes in the browser inspector i see the flakes have the transform matrix3d being applied .. so force3D is working.. its just there are too many DOM elements being animated at the same time. For example in Firefox the amount of flakes you have set for snowAmount is 400.. When i make that 200 it smooths out but still is slow. Whereas Chrome renders the flakes at 400 better than Firefox. Im sure there is a way to optimize your code to take into account the different browsers. But the fact remains that animating DOM elements are very expensive performance wise on the CPU, as stated above, and in other forum posts... so maybe some other people in the community can offer some better advise than me

Hello and welcome to the GreenSock Forum! GSAP performs really good on Android. Do you have an example via codepen or jsfiddle to better see what issues you are having. what version of Android are you seeing this on? what device and model are you seeing this on? I will be more than happy to help test on Android, so we can see why you are having bad performance. thx

im sorry.. but im still a little confused on what you mean by "pad" out your timeline ? timeline.set({}, {}, 10);

Hello Pablo, Is it possible to set up a limited codepen or jsfiddle to better see your code in context with JS, CSS, HTML.. thx

you can try one of the GSAP kill methods: here are the available kill methods: _________________________________________________________________ kill() Kills the animation entirely or in part depending on the parameters. http://api.greensock.com/js/com/greensock/core/Animation.html#kill() //kill the entire animation: myAnimation.kill(); //kill only the "x" and "y" properties of the animation (all targets): myAnimation.kill({x:true, y:true}); //kill all parts of the animation related to the target "myObject" (if the tween has multiple targets, the others will not be affected): myAnimation.kill(null, myObject); //kill only the "x" and "y" properties of animations of the target "myObject": myAnimation.kill({x:true, y:true}, myObject); //kill only the "opacity" properties of animations of the targets "myObject1" and "myObject2": myAnimation.kill({opacity:true}, [myObject1, myObject2]); _________________________________________________________________ killAll() Kills all tweens and/or delayedCalls/callbacks, and/or timelines, optionally forcing them to completion first. http://api.greensock.com/js/com/greensock/TweenMax.html#killAll() //kill everything TweenMax.killAll(); //kill only tweens, but not delayedCalls or timelines TweenMax.killAll(false, true, false, false); //kill only delayedCalls TweenMax.killAll(false, false, true, false); _________________________________________________________________ killChildTweensOf() Kills all tweens of the children of a particular DOM element, optionally forcing them to completion first. http://api.greensock.com/js/com/greensock/TweenMax.html#killChildTweensOf() <div id="d1"> <div id="d2"> <img src="photo.jpg" id="image" /> </div> </div> <div id="d3"></div> TweenMax.to( document.getElementById("d2"), 1, {css:{left:100}}); TweenMax.to( document.getElementById("image"), 1, {css:{left:100}}); TweenMax.to( document.getElementById("d3"), 1, {css:{left:100}}); //only kills the first 2 tweens because those targets are child elements of the "d1" DOM element. TweenMax.killChildTweensOf( document.getElementById("d1") ); _________________________________________________________________ killTweensOf() Kills all the tweens (or specific tweening properties) of a particular object or the delayedCalls to a particular function. http://api.greensock.com/js/com/greensock/TweenMax.html#killTweensOf() TweenMax.killTweensOf(myObject); TweenMax.killTweensOf(myObject, {opacity:true, x:true}); _________________________________________________________________ You could use any of the above GSAP methods to stop the animation or kills the animation entirely or in part depending on the parameters and what method you use hope this helps!

Hello Everybody, I had a question on what everyone's preference is when animating... Do you prefer seconds or frames when animating? Also in what instances do you suggest animating in frames? I'm trying to get a better grasp of animating with GSAP using frames. In computer animation when animating, for example 24fps. So in GSAP when animating with frames using the useFrames special property. What determines the frames per second (FPS)? Does the browser determine the FPS? Thanks for any help with my questions to better understand using frames with GSAP!

that was the ticket Carl .. I missed that .. was just about to ask for the HTML code to see what the custom property in the DOM look like! niccccce!!!

Hello and Welcome to the GreenSock Forums.. Could you possibly create a jsfiddle or codepen example so we can see your code in context to better help you.. thanks. I cant see your html or css.. but from what i see in your code above.. your trying to reference the element to get the currentFrame.. but in your onUpdateParams you would need to pass {self} .. which passes the tween as a parameter to your function: var updateCallback = function(tween,theElement) { console.log(tween); // outputs tween instance object console.log(tween.vars); // currentFrame is inside the vars property console.log(tween.vars.currentFrame); // outputs 100 } var theElement = $(".box"); // theElement.currentFrame = 0; // un-commenting this line makes the callback function always return 0 TweenMax.fromTo(theElement, 2, { currentFrame: 0, autoCSS: false }, { currentFrame: 100, autoCSS: false, onUpdate: updateCallback, onUpdateParams: ["{self}", theElement] // "{self}" is the tween instance } ); notice in your updateCallback function i pass tween as the first parameter which references {self} if you inspect the tween object in the first console.log above in your browser inspector / console .. console.log(tl); you will see that currentFrame is inside the vars property tween object --> vars --> currentFrame onUpdateParams : Array - An Array of parameters to pass the onUpdate function. For example, TweenMax.to(mc, 1, {x:100, onUpdate:myFunction, onUpdateParams:[mc, "param2"]}); To self-reference the tween instance itself in one of the parameters, use "{self}", like: onUpdateParams:["{self}", "param2"]http://api.greensock.com/js/com/greensock/TweenMax.html i hope this helps unless im missing something since i don't see all your code in context

check out this other codepen example using autoAlpha http://codepen.io/jonathan/pen/FqtCk It looks like in your setVisibile() function you had a Tween to() method animating visibility visible and also a jQuery css() method setting visibility visible. You can just comment out the jQuery css() method, since you are already tweening that element.