Jonathan

Hello and welcome to the GreenSock Forums! Rodrigo beat me to it you can use the onUpdateParams special property: http://api.greensock.com/js/com/greensock/TimelineMax.html var tl = new TimelineMax({onUpdate:updateUI,onUpdateParams:["{self}"]}); function updateUI(tl) { totalProgressSlider.slider("value", tl.totalProgress() *100); } onUpdateParams : Array - An Array of parameters to pass the onUpdate function. For example, new TimelineMax({onUpdate:myFunction, onUpdateParams:["param1", "param2"]}); To self-reference the timeline instance itself in one of the parameters, use "{self}", like: onUpdateParams:["{self}", "param2"] basically you reference the timeline by using "{self}" and pass it to your function callback as tl parameter to be used with totalProgress() also here is an example by Carl from GreenSock showing the TimelineLite example finished.. it has a simple usage of jQuery Slider UI integrated with GSAP: http://codepen.io/GreenSock/pen/bpezc

Glad you got it sorted... You can also use force3D:true ... on your GSAP tween to force hardware acceleration rendering http://forums.greensock.com/topic/7842-greensock-slow-on-mobile-devices/?view=findpost&p=34586

Hello Why not include your fonts via <link> tag instead of using @import and see if your issue still happens performance issue when using @import and using @import inside link with other styles http://www.stevesouders.com/blog/2009/04/09/dont-use-import/ https://developer.mozilla.org/en-US/docs/Web/CSS/@import Here is your jsfiddle with the Google Web Font css used in a link tag added via the jsfiddle resources option http://jsfiddle.net/VxvsS/4/ I am not seeing this issue in Firefox

thats weird because I see it working on: Windows 7 on latest Chrome, Firefox, IE10, and IE11 Mobile Android 4.1.2 Galaxy S3 on mobile Chrome, mobile Firefox, Opera mini, and Android stock browser very strange even if you use the CDN instead of your local TweenMax: http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/TweenMax.min.js

is the TweenMax.min.js version 11 or 11.2 ?

what browser are you using? what operating system are you on? are you using the latest version of GSAP?

what about this.. try this.. on codepen hit the Run button to trigger the animation: http://codepen.io/jonathan/pen/oyAEt this uses autoAlpha instead of opacity: http://codepen.io/jonathan/pen/ptbfu autoAlpha: http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html autoAlpha - the same thing as "opacity" except that when the value hits "0", the "visibility" property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, "visibility" will be set to "inherit". We don't set it to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.

Try adding immediateRender:false to your staggerFrom() tween EXAMPLE: http://codepen.io/jonathan/pen/iGHlw By default, immediateRender is true in from() tweens, meaning that they immediately render their starting state regardless of any delay that is specified. You can override this behavior by passing immediateRender:false in the vars parameter so that it will wait to render until the tween actually begins. You wont need to include the CSSPLUGIN if you include TweenMax. TweenMax includes it, and alot of other goodies: http://api.greensock.com/js/com/greensock/TweenMax.html is that what you wanted?

Hello benjino, Have you tried this: // wait until DOM is loaded $(document).ready(function(){ console.log("DOM is ready"); // wait until window is loaded (images, links etc...) window.onload = function() { console.log("window is loaded"); var headline = document.getElementById("headline"), subhead = document.getElementById("subhead"); TweenMax.staggerFrom([headline, subhead], 1, {delay:1, scale:0, opacity:0.3}, 2); }; }); basically.. your waiting for the DOM to be ready and then run the code when the window has loaded (images, links, etc.. ) the reason I put the window.load inside the DOM ready() is because sometimes the window.load event can fire before the DOM is ready.. also you could also use jQuery on() load event.. the shorthand load event load() has been depricated // wait until DOM is loaded $(document).ready(function(){ console.log("DOM is ready"); // wait until window is loaded (images, stylesheets, links etc...) $(window).on("load", function() { console.log("window is loaded"); var headline = document.getElementById("headline"), subhead = document.getElementById("subhead"); TweenMax.staggerFrom([headline, subhead], 1, {delay:1, scale:0, opacity:0.3}, 2); }); }); If you can provide a codepen or jsfiddle example we can better help you! http://codepen.io/pen/ http://jsfiddle.net/ hope this helps!

Awesome Rodrigo.. thats gonna help alot! I will post when and if I make any head way on that strange behavior for rotation, after some more tests. Thanks!

Hey Rodrigo, Do you still have that codepen link that you setup with the strange behavior you noticed with rotation? the links to the code pen seem to be all garbled up now. I was gonna try something to see if we can try to find out why that strange rotation behavior happens. Thanks!

Thats a awesome explanation Jack.. Makes perfect sense, thanks for the quick answer !!!

Hello.. Sorry if this is not a question regarding usage of GSAP. But i didnt know where else to ask this question. Where does the name GreenSock come from or / and what is the story behind the name GreenSock?Thank you!

Hello.. If you are using the latest GSAP version.. I believe you are looking to use the add() method. add(): Adds a tween, timeline, callback, or label (or an array of them) to the timeline. Example of add() usage: //add a tween to the end of the timeline tl.add( TweenLite.to(element, 2, {left:100}) ); //add a callback at 1.5 seconds tl.add(func, 1.5); //add a label 2 seconds after the end of the timeline (with a gap of 2 seconds) tl.add("myLabel", "+=2"); //add another timeline at "myLabel" tl.add(otherTimeline, "myLabel"); //add an array of tweens 2 seconds after "myLabel" tl.add([tween1, tween2, tween3], "myLabel+=2"); //add an array of tweens so that they are sequenced one-after-the-other with 0.5 seconds inbetween them, starting 2 seconds after the end of the timeline tl.add([tween1, tween2, tween3], "+=2", "sequence", 0.5); http://api.greensock.com/js/com/greensock/TimelineLite.html#add() http://api.greensock.com/js/com/greensock/TimelineLite.html#add() http://api.greensock.com/js/com/greensock/TimelineLite.html http://api.greensock.com/js/com/greensock/TimelineMax.html Hope this helps!

yeah, too bad IE9 and below don't support backface-visibility .. Cool effect!!!

Is there a reason you dont want to use SplitText Plugin as Rodrigo advised above... and let it do all the heavy lifting in splitting the text and keeping the text in place. Here is the SplitText Plugin page with a awesome tut by Carl: http://www.greensock.com/splittext/ Also checkout the SplitText Docs: http://api.greensock.com/js/com/greensock/utils/SplitText.html

Carl beat me to it... He are the steps for creating a codepen pen: go to http://www.codepen.io/pen/ under the JS panel you will see a gear icon, click it select a JavaScript library if needed from the dropdown enter the TweenMax script path in the External JS File or Another Pen input: http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/TweenMax.min.js add your HTML, CSS, and JS into the right panels click Save note.. you can find the GSAP script paths on the top of this page in the top of the left sidebar Titled get GSAP does that help?

Hello and welcome to the GreenSock Forums! If possible could you provide like a limited codepen or jsfiddle so we can better help you and see your code in context, in a live editable environment. Or a link to your webpage that is giving the issue. Thx

presuming your element object is a jQuery object and not a DOM object. Instead of trying to reference that DOM object why not just use jQuery's eq() (zero based index) http://api.jquery.com/eq/ for (var i=0, len=hd4.text().length; i<len; i++) { TweenLite.to(hd4.eq(i), 1, {marginLeft: -0.6, color:'#F09500'}); } Is the hd4 variable a reference to a jQuery object or a DOM object?if possible can you setup a codepen or jsfiddle so we can see your code in context of what hd4 references.. regarding your kerning in chrome.. looks like there is a bug in Chromium about Font kerning incorrectly turned on when setting other font features - Issue 165643: http://code.google.com/p/chromium/issues/detail?id=165643 best thing to do is use the CSS property letter-spacing to control the space between letters https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing or you can use the CSS text-rendering https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering #element { text-rendering: optimizeLegibility; } // or use geometricPrecision #element { text-rendering: geometricPrecision; } Hope this helps

Hello, here is working codepen example of your code above: http://codepen.io/jonathan/pen/folIH In order to animate CSS properties you will need to include the CSSPLUGIN; http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html or you can use TweenMax which includes CSSPLUGIN and other goodies all in one. does that help?

If anyone is interested.. Here is a list of CSS properties that can be animated: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties http://oli.jp/2010/css-animatable-properties/

glad you got it working .. it will work in Firefox also

Hello... and welcome to the GreenSock Forums! If you check Mozilla Developer Network.. you will see how border-width is not an animated property https://developer.mozilla.org/en-US/docs/Web/CSS/border-width You have to use the non shorthand properties.. Animatable as each of the properties of the shorthand: border-bottom-width: yes border-left-width: yes border-right-width: yes border-top-width: yes border-width: no And if you dont use quotes.. make sure you use camelCase for the property name.. ie. borderTopWidth for example Hope this helps..

Since a <span> is a inline-level element, than you would need to set the span's CSS to display property to block or inline-block to make it a block-level element, otherwise use a <div> tag or a tag which is a block-level element by default. You can read more about inline and block level elements here: http://www.css-101.org/inline-level-elements/ http://www.css-101.org/block-level-elements/ https://developer.mozilla.org/en-US/docs/HTML/Inline_elements https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements

Thanks for posting your solution. Also i thought this might be helpful.. here are some Guides to Transforms for IE, found on Microsoft Developer Center: Internet Explorer Dev Center: CSS Transform Functions Internet Explorer 10 Guide for Developers: CSS 3-D Transforms Internet Explorer 9 Guide for Developers: CSS 2-D Transforms