AdObeOne

It looks like Animate won't do DOM animation. Who will fill this GUI-animation-gap? GSAP?

OSUBlake, thank you for all your assistance. That may well be so, but you continu to ignore that I can't force this quick fix on my clients. I guess inline is the best, although inconvenient option, to avoid the embed problem altogether.

Hello OSUblake, Thank you for your response. The animations I hoped to make were for sale for other websites. So installing a server isn't a solution. I put some animations on my site as a demonstration of the possibilities. Not being able to make the animations behave correctly in all browsers kills this business activity for me. Which seriously damages my business. Kind regards, Ad

Great idea celli. I was thinking the same thing. Edge Animate hasn't been developed since a long time. It's a nice tool to start in animation, but file management and using more than one edge animation on a site meant manually changing files. Very user unfriendly, considering the target users of Edge Animate. Unbelievable that Adobe didn't solve that within the first couple of versions. Then they killed the export option I was used to using, which was a pain. Combining GSAP's power and features with a GUI-interface would be totally awesome.

Hello OSUblake, The console indicates two non relevant errors. A favicon.ico that is not found, but that is displayed anyway. And an include of a css file that is no longer used. So no error messages regarding the use of the animations that are not correctly displayed within iframes on the mobile webkit browsers. Kind regards, Ad

Hello OSUblake, Thank you for your response. So I have to install a server to be able to use the load command instead of iframe, to avoid the problem with webkit mobile browsers. That sounds like shooting with a canon on a fly Thank you for all your time and effort explaining this to me. I hope it benefits more users than just me. I'll get busy with the console. Kind regards, Ad

Hello OSUblake, I didn't see that there was a second page. So I was still waiting. I'm still in doubt regarding my questions. When I use frames my animations are shown. So jQuery is loaded in the correct order. And my paths are correct. Is that correct? If I only replace the iframe by a load command do I need to change anything in the order in which things are loaded or in the paths I use? Is AJAX used when I use the load command? Thanks for you response, Ad

Hello OSUblake, Thanks for your reply. The animations I use are shown when I use iframe. So the order of included files is correct I presume. Or does the load function require another order? All code for the animation is contained within the loaded html-file and the files that are linked to it. I see in the linked example that "ajax" is included in the paths to the files? I use these paths for jquery and use local Greensock files. <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> Do I need to change that? Kind regards, Ad

Hello OSUblake, Thanks for the links. As I understand, the html file only contains the assets in these examples. No links to css or javascript within this loaded html file. This is what I use in my index.html: <div id="myContainer"> <script>$("#myContainer").load("folder/myAnimation.html")</script> </div> My site is like a shop window. I (very) regularly change parts of the content. The content are examples of what I can do for potential clients. For easy maintenance I like to keep an animation as a self contained unit within the page code and within the file structure. So it loads it's own css and javascript file(s). And all files for the animation are within one folder. The correct amount of space is created for my animation. So this partially works. But no animation is shown. Is it necessary for the solution that you suggest that there is a function call as part of the load command to a function that contains the animation commands? Kind regards, Ad

Hello OSUblake, The correct amount of space is created (width and height) using the load command, but nothing is shown of the loaded html-file. I can't find any information about how to accomplish that. Can you tell me how I make the loaded file visible? Thank you in advance for your help, Ad

@Carl I don't know how to put it simpler then this (quote from a previous post): " Short: do you have a solution to make an animation scale responsively within a webkit mobile browser window? " And there is a bare minimum example attached to one of my previous posts on this topic. I'll try OSUblake's solution, using a separate file, because of maintainability. If this does not solve the problem then I'll take the Stackoverflow route you suggest. @OSUblake Thanks for your response. I'll try the load option. I don't like the inline option, as I replied to Jonathan. I like to split up large chunks so I can more easily keep an overview. I'll let you know if this solves the problem.

Two weeks since the previous post on this topic. No new response. So no one but me has a problem using Greensock animations scaling responsively on webkit mobile browsers? Please let me know. Which solution did you use to make this work?

Hello fellow Greensock user, Short: do you have a solution to make an animation scale responsively within a webkit mobile browser window? Longer: I've managed in the meantime to try the CodePen solution and the resizable JQuery option. Before that I tried the FitVid solution and a couple of other 'solutions' that I found on forums. But non of them work. To see what I mean in context, please use a webkit mobile browser to visit: www.nieuwjaarverslag.nl. There are two animations and one interactive piece of content that are only partially visible. I would very much like to be able to correct that. Any help is deeply appreciated, Ad

@Jonathan: Strange. It worked just fine. But now it doesn't anymore. Not even in CodePen @PointC: Thanks for your scarce time and the side by side pen. Very handy to see the differences. That sure helps @Acccent: Thank you for the extensive explanation and the second attempt. I hope you not only helped me, but others as well.

Hello Carl, I thought a private pen would still be accessible aslong as I provided the link. Just not that others could find it. My mistake. I've made the pen public. Thanks, Ad

Hello Carl, It was not my intention to use Greensock as a middleman to solve my pain point (and of a lot of other Adobe Illustrator users). It was my suggestion to use the combined influence of Greensock and all the great names in the field of web animation to stimulate Adobe to solve the svg export problem(s) asap. Not just being kind enough to listen to the feedback. It's better to try to close the fosset than keep trying to find better ways to keep mopping up the spill. But no one seems to agree with me, so I'll stop. Thanks for your reply and good luck with the feedback and with this initiative to find better workarounds, Ad

Hello, I'm trying to animate a coin smoothly into a hole in the ground. As far as I can figure out I need to use transformOrigins to realize the necessary tweens. But the transitions between the tweens should be smoother. I tried various eases but this is the best I could achieve. The slowMo ease is used to realize smooth tweens. Is there a way I can use slowMo in this case to make the whole animation smoother? Thanks in advance for your help, Ad

Hello Jonathan, I want to make the animations as a module. So separate files in separate folders. And just an embed of some sort on the actual page. That makes it easier for myself and others to do maintenance on the site itself and on the animation if necessary. And as mentioned it works fine using the padding-bottom hack as suggested on: https://css-tricks.com/scale-svg/ Just not on (some?) mobile browsers, so I really would like to be able to test the solutions mentioned on the CodePen site: http://blog.codepen....izeable-embeds/ Could you please shed some light on these solutions? I still have no response from CodePen on this. Kind regards, Ad

Hello Jonathan, Thank you for your reply. That is indeed a very informative article and I've read it before. And that gave me the solution of the padding-bottom hack. Which works fine on svg's, even on mobile browsers. But I guess I oversimplified my example. As indicated in the first post I'm trying to get the same result displaying an animation. So that all of it is shown proportionally within the div that contains it and that uses the same padding-bottom hack. Which works fine on all desktop browsers, but just not Safari and Chrome under iOS as far as I can test. There is a solution mentioned on the CodePen site that I haven't been able to test yet, because I don't understand how to use it. I've requested a more elaborate explanation via the customer service of CodePen, but I have no reply yet. Maybe you could shed some light on it, so that all Greensock users can benefit from this solution. http://blog.codepen....izeable-embeds/ Kind regards, Ad

Hello Jonathan, In the meantime I've acquired a codepen pro account, so i could use my very simple example image easily. I made a codepen like you requested: codepen.io/AdObeOne/pen/obQpyY. Using fitvid, like you suggested, the 'x' is still only partially visible on my iPhone 4S using Chrome or Safari. Just like all the other solutions I've tried. The image does not resize correctly to fit entirely on the screen. Solutions to this problem are mentioned on the codepen site. But I don't quite understand how to use them. http://blog.codepen.io/2014/03/11/resizeable-embeds/ I guess I should ask Chris Coyier about that. Or can you tell me what he means? Kind regards, Ad

Hello Carl, My pain point is with the export of svg from Illustrator (and to a lesser degree the position of a svg inside Illustrator when you re-open a file). Svg has been around for quite some time now and Adobe is a big company with lots of resources and Illustrator is not a brand new program that still hasn't worked out the starting bugs. But still the svg-export doesn't work correctly. Even after the creation of the extra export option. As I said. Finding workarounds in the mean time is a great initiative. But, the web animation community has some big names like Greensock, Chris Gannon and many others. Why is there no pressure, no formal request to resolve this problem? Preventing is better than curing, isn't it? And it is not like there has to be made a choice, one or the other. Why not both? Kind regards, Ad

Hello Carl, I agree with retropunk that this post is a great idea to find workarounds. But can I conclude from this that Adobe has responded not to solve these problems as I am sure many have requested? Greensock as well I presume. So we all have to keep repeating these corrective actions as Chris Gannon demonstrates and other workarounds? Kind regards, Ad

Hello Jonathan, Thanks for your reply. I tried fitvid.js, but it doesn't seem to do anything. I have created a bare minimum example that uses a simple image of two diagonal lines, rather than a whole animation, because the animation is not essential to the problem. I see no way to indicate or include an image in a codepen. Am I overlooking something there? I have attached a zipped file of the bare minimum example. i hope this enables you to help me solve this problem. The 'x' in the image is totally visible and scales perfectly in desktop browsers, but will be only partially visible in a mobile browser window. Kind regards, Ad ResponsiveOnMobile.zip

Hello Jonathan, Thanks for your reply. I'm looking for a solution that will make iframe content, so not the iframe itself, scale proportionally within a mobile browser. The iframe itself scales fine as far as I can detect. I know this is not a GSAP specific question. But I think the solution can benefit potentially all GSAP users. The padding-bottom works fine in all desktop browsers I tested. But not in Safari and Chrome on iOS. The only 2 mobile browsers I have access to. All my friends have iPhones. They can't check it for me in other browsers. I've tried all css and javascript/jquery solutions I could find. I've only not tried a php / AJAX solution, because I have no knowledge op php. Is there an alternative for using an iframe that you know that works in mobile browsers? I found one or two alternatives, but either they don't scale the animation proportionally or they don't show the animation at all. Kind regards, Ad

Hello, Using iframe (like the example below) works great in responsive scaling of my animation in all desktop browsers I tried under OS-X and Windows 10. But not on my iPhone 4S using Safari and Chrome. I haven't been able to test it in other mobile browsers unfortunately. If you want to see it in action. There are two animations at the top of: www.nieuwjaarverslag.nl. I've tried all the css, javascript/jquery solutions that I could find online, but none of them work. I read about the problem on iOS where the original dimensions of the content of the iframe are maintained, so that only a part of it is visible. Is there a solution that does scale an animation correctly in a mobile browser? Any help is greatly appreciated, Ad <div id="container"> <iframe src="folder/animation.html"> <p>iframes are not supported by this browser.</p> </iframe> </div> #container { position: relative; padding-bottom: 40%; (because the animation is 500 by 200) height: 0; overflow: hidden; } #container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }