Jonny

Hello all, I'm sure we're all making the transition to HTML5, and finding a lot out a long the way - and getting mixed messages a lot! I'm interested to hear people's opinions on using web fonts in html5 banners, as well as general approach to file size. There seems to be very little to no advice on this, and i've had to liaise with ad server platforms on how to use web fonts - does it count as initial load, do we store locally or via CDN etc? What are other people's opinions? Currently I locally store all web fonts needed (ttf, woff, eot and svg). I only count the zipped file size of the largest type file format for each type weight, and add that to the html, css, js and images. - i link to GSAP via CDN. I try to aim to have the whole ad within 200k. Largest font size comes in to about 60-80k in total for two weights, that leaves 120-140k for everything else. I could use SVGs, but this makes it impossible to use splitText plugin for example. How are other people approaching these fresh challenges? J.

Hello, I am tweening a still image, on my really nice mac it looks fine but viewing it on IE11 on a PC, the image stutters and wobbles when tweening. I have added a window.onload function() {CSSPlugin.force3D = true;}; i have tried CSSPLUGIN.force3D = true CSSPlugin.force3D:true etc etc....... Nothing seems to work (yes, i am including the CSSPLUGIN.min.js file), am i doing it wrong or at the wrong time? Still the image seems to shudder along during the tween. thanks for your help, also, i thought i could explain without codepen, but sorry i went against recommendation! Jonny

Hello, i am using splittextfield to alpha in a headline, character by character before alpha- ing out again. This is on a timeline and when it reaches the end i call the method tl.clear(); This empties the whole timeline in IE11, and nothing appears second time round - it works fine on chrome etc.... If i don't use tl.clear();, I can use tl.restart();, but this does not restart the tweens properly. I get letters faded half in second time round. Again - this works fine on Chrome.... Has anybody experienced this before? Thanks very much, Regards, Jonny

Hi Carl, i'm very sorry i haven't replied to you. I resolved the issue, and haven't checked my Greensock account since - is there a way to be emailed when i get a reply? Anyway, for some reason the splitfield animations weren't resetting themselves, so i ended up using tl.clear(); just to ensure the timeline was empty for the next loop. Is there a better way to do this, or is this method for any reason an inefficient way of resetting things? thank you, J.

Good morning, I am working on an animation where i have text animating on by character using splittext field. All i am doing with them is changing opacity from 0 to 1 using the TweenLite.staggerTo method, in a timeline. Everything works fine, in my init funciton i have to set the tweens to have properties in the slightly odd following way: (header1Chars is a variable of header1.chars) but everything works correctly. TweenLite.to(header1Chars, 0, {alpha:0}); TweenLite.to(header1, 0, {alpha:1}); I loop my animation three times, and on the third time (first two are ok), when the animation is restarting, the text is half visible, it's as if the tweens have not completed/reset themselves even though the previous run went fine. Is there a way to ensure that tweens will reset ready for the next animation run? Please note that there is a series of text being animated in this way in the timeline. thank you, please let me know if i can elaborate: ps i tried a codepen and it didn't seem to work for some reason, but i didn't have the time to spend too long on that so i hope everything here makes sense, Thanks once again, J:)

Diaco, Thanks for your efforts in creating that function. At my ability and knowledge of Javascript, that's a little too advanced for me, and more convoluted than what I need. Carl, I had thought of this, but just wanted to know if i could control the alpha of a timeline etc, - i just wanted to minimize the amount of additional divs, containers etc that i would need to include in my code. Having my answer, I shall indeed now just wrap the text in a holding container, as this is the most straightforward way I believe. Thanks to all for the help, your time, and sharing of knowledge. J

Oh hi guys, thanks for the speedy answers. I don't think they match exactly what i want, i have managed to make a codepen - i tihnk i was inputting wrong library before, anyway.... for clarity, i'm saying here is my timeline, and at a certain point/event, i want everything in that timeline to become invisible, so i try tweening the timeline to an alpha of 0. This doesn't work, I could try tweening the alphas of all elements in the timline to 0, but these seems inefficient, If you see my codepen below, it should clear things up, thanks again for your help, much appreciated.... http://codepen.io/anon/pen/qEyzWv

Good day, i'm sorry, codepen doesn't seem to be working for me for some reason, i think i explain clearly enough though. I have a timeline consisting of text that i would to appear, then disappear, followed by more text doing the same thing (see example below): var txtTimeline = new TimelineMax(); txtTimeline.to(header1, 1, {alpha:1. delay:1}); txtTimeline.to(header1, 1, {alpha:0, delay:1.5}); txtTimeline.to(header2, 1, {alpha:1., delay:1}); txtTimeline.to(header2, 1, {alpha:0, delay:1.5}); In my code, this is accompanied by a video, when i hover on the video, i have an event listener that changes the alpha of the video to 0; I want to change the alpha of anything in the timeline to 0 as well. Question: Is there a way to change alpha values of a timeline, without having to change each element within the timeline individually? I hope this makes sense, let me know if there is anything else i can assist with. thanks in advance, J

Worked just as you said. Thanks very much for your help, and the quick response J

Hi all, I am creating a simple interactive animation, where I have a red box inside of a container. When the user clicks inside the container, the red box moves to the cursor co ordinates, and then 'drops' to the container baseline co ordinate. This works perfectly the first time, but on subsequent clicks, the red box jitters a bit, but effectively stays on the baseline. In fact, if i click near the bottom of the container, the red box disappear off screen and then floats 'up' to the baseline! Is Greensock not updating the co ordinates properly, because it's using the matrix transform? I'm not sure if it's my amateurish code that causing problems, or a glitch in the system that i don't know about :S Thanks for your help