dada78

Hi Carl, I have been using the new version (Animate CC) that was just launched and it now supports static and dynamic text. All static text will be automatically converted to outlines on publishing and turned into canvas shapes. The outputted shapes are nicely compressed (option checked by default under the publishing settings).

Thanks Carl, that makes total sense. Just thought I could use the "restart" method or something of that sort, so wasn't seeing the forest for the trees. I updated the codepen to reflect your suggestion: http://codepen.io/dada78/pen/96ed663e62dcc6fbad960dc66ccd4dcf Thanks again!

For some reason I can't wrap my head around this (frustrating). So I created a codepen to illustrate my question better: http://codepen.io/dada78/pen/86c2c518f1758d346675bdc031f6d5c8/ So I can't figure out - despite the examples above - how to restart the tween inside the added function "frame2tl". After adding it the second time, I basically want to run it from the start, resetting it basically. I tried invalidate();, restart(); I know it's something super simple...(sigh) Thanks!

Thanks Diaco, but all I would like to do is simply "restart" the shaketl timeline instance whenever I add it inside the maintl timeline instance. For example I have the following: First I add the shake timeline instance followed by a few other tweens... maintl.add(shaketl) .to(element, 0.2, {alpha:1}, "middle") .to(element, 0.2, {alpha:1}, "middle") //then when I add it again it doesn't play because the starting values haven't been reset. .add(shaketl) //the second time it doesn't animate because it's not been reset How can I accomplish this? Thanks!

Hi guys, I have the following timeline that I wish to insert into another timeline: var maintl = new TimelineLite(); var shaketl = new TimelineLite(); shaketl.fromTo(this.phoneImg, 0.08, {scaleX:1, scaleY:1, rotation:4}, {scaleX:1.1, scaleY:1.1, rotation:-4, yoyo:true, repeat:10}) maintl.add(shaketl) //followed by a few animations here After which I would like to insert the "shaketl" again restarting it. How would I accomplish this? Thanks!

I have been testing out the plugin, by exporting SVGs in different dimensions and then animating the stroke. Generally I am exporting SVGs with the viewbox only so I can size the width and height via CSS. Here I am using 2 SVGs using 2 different viewbox sizes, given the SVGs a width and height of 270px x 124px. When I animate the stroke for both SVGs using an absolute pixel value, it appears that the viewbox size gets honored rather than the assigned pixel width and height. Would you therefor recommend always saving out SVGs at their default size that they would finally get deployed in? Thanks! CODEPEN here:http://codepen.io/dada78/pen/fb9c3d736666762504bdb49873cd6955

Yep, Carl is right. That's what I was expecting: That the starting value would be representative of the "0%" and the end value would be the "100%".

Thanks Diaco, that works, however I was wondering why tl.to("#border", 2, {drawSVG:"100%", ease:Expo.easeOut}); isn't working, since in the video it was said that using just "100%" would be the same as saying: "0 100%" or "true", however none of these are working either in a "to" tween. I am I misinterpreting this somehow? Thanks!

Hi guys, I watched this: https://greensock.com/drawSVG and then tried to do a "to" animation using just: tl.to("#border", 2, {drawSVG:"100%", ease:Expo.easeOut}); to tween a line from 0% to 100%. In the doc it says that if only one value is used, the plugin assumes that it's going to be tweened from 0%. However I can't get it to work unless I set the starting value to 0% specifically. What am I missing here? Thanks!

Hi Jonathan, would I need to add force3D also if adding rotation as per your recommendation to smooth out animation on Firefox? Also, would this mean that I would need to add it to all my tweens? Thanks!

Yep, thanks Jack! Adding rotationZ: 0.01 did the trick! Awesome

Hi guys, I am working on a banner animation that involves scaling 2 images (placeholders) at the same time in a sort of parallax effect: http://codepen.io/dada78/pen/ffb31fe839a80e3e8f4826561bd3f691 It animates smoothly in webkit and mozilla but stutters (a lot) in IE10 and 11. ANY clues how to solve this at all? Thanks!

Thanks Jonathan! Good reminder about adding the preserve 3d property. I think you meant to say "transformStyle" though? Also great tip about setting the position! Thanks so much!

Awesome Diaco! That does the trick, but it seems a bit abrupt when the videoplayer appears in Firefox, and adding a fade up (opacity) to #video1 doesn't seem to help either, it just appears after it has finished the scale up. Do you know how to control that by any chance? And in Firefox it also doesn't look as if the initial scale (0.5) is honored compared to Chrome... Thanks so much for the quick response!

Hi guys, I am experiencing an issue in Firefox when I am scaling up a video container div. For some reason the video element inside doesn't seem to be scaling with it. Anyone having an idea as to how to resolve it? You can see the video player inside not matching the dimensions set. Sometimes it works, but as you refresh it doesn't. Thanks!

Hah, I found the fix...Out of all the solutions posted the one from tNick Spiel:https://css-tricks.com/forums/topic/chrome-webkit-border-radius-bug/page/2/ "The following applied to the parent element with the border radius applied to kick webkit back into line for me:" -webkit-mask-image: -webkit-radial-gradient(white, black); worked for me!

Hi guys, thanks so much for the tip, it smoothes out the transition for sure. But now I have this problem on Chrome + Safari (Firefox it looks good). Looks like the border radius is being ignored during the scaling. Any ideas how to fix this? http://codepen.io/dada78/pen/fd6af785bd28ce552e17e93e759047c4 Thank you!!

Hi guys, I feel like I have tried everything to get this to work, but for some reason I can't get this background image to scale properly. Objective: - Scale image up from (center), from 90% - Smooth animation even when timing is slower I tried applying force3d but to no avail. Any ideas on how to best accomplish this? Thanks!

No problem, thanks Carl!

Hi OSUblake, yes I am aware that minification and gzipping are different things, that's why I was wondering why the minified, gzipped (compressed) outcome of the minified file comes in at 35kb instead of 23kb? Thanks!

Hi guys, could you shed some light in regards to the size of the libraries? When I go to the downloads page and I select TweenMax for instance, it indicates 23kb total. Is assume this would be the minified and compressed size? When I however compress the TweenMax.min.js on my desktop it comes in at 35kb. Am I missing something here? Thanks so much!

Thanks Carl for clarifying this! Very helpful!

HI guys, this is pertaining to banner ad animation: (for example http://codepen.io/GreenSock/pen/yjGDd) When I review all the banner examples, all of them use variables that are assigned to CSS id elements. For example, instead of writing: var car = document.getElementById("car"), and then: tl.to(car, 1, {left:177, ease:Back.easeOut}) Wouldn't it be easier to skip all that extra code and go straight into setting up the animation like so, skipping the variables all together, since the TweenMax lib is used? tl.to("#car", 1, {left:177, ease:Back.easeOut}) Or am I missing something here? Thanks!

Yes thanks, unfortunately it boils down to the fact that the lines then break into 3 instead of 2 lines if white-space is set to normal. The font-size should accommodate for 2 lines as is. I might just need to wrap each line into a separate div...Thanks so much for helping to troubleshoot this!!

Hi Jonathan, you were spot on! The letter-spacing didn't seem to do anything, but when the white-space was changed to "normal" or any of the other values, the text would break into 3 lines. The issue is that it's breaking onto 3 lines, even though it should be 2 (there is only one line break and the text should fit onto 2 lines) , which is the issue I was having before, hence someone in this forum suggesting to use whites-pace:nowrap; which works everywhere we tested except the Samsung Galaxy Tab2/3. Boo! Anyway, thanks for looking into this. We might just have to ignore this device and serve a backup.