Using CSS animations in Edge Animate without .js

Is it possible to use edge animate with only css transitions and effects. I do not want to have these .js files for animation and only want to draw and animate in css. Is this possible?

Ask in the Edge forum, but I would simply assume no. CSS3 animation support is different and inconsistent across browsers, so the only way to get predictable results is actually jQuery animation.
Mylenium

Similar Messages

How to create scroll controlled svg animations in Edge animate cc

Since I am a beginner in Edge animate, I am very confused about svg animations in Edge animate. I want to create an effect like this http://tympanus.net/Development/SVGDrawingAnimation/index.html. In this page the animation is set to autoplay, I will controll my animation using scroller bar in adobe muse cc. Please tell me how to animate svg images like this.
Thanks in advance

Hi bhardwajaralhul517,
Found something that could help you get started
Using parallax scrolling in Animate with a single line of code | EdgeDocks.com
How To Create A Parallax Scrolling Website | Web Design Principles
Thanks,
Preran

Import flash animation into edge animate

Hi,
I need to import a flash vector cartoon style animation into edge animate, do you know how can I do it?
Kind regards,
eugenxi

Hi eugenxi,
You can use the Export Png Sequence feature included with Flash CS6 to export a series of pngs from your symbol animation (tut by Tom Green):
http://layersmagazine.com/png-sequence-from-flash-cs6.html
Then import the pngs to Fireworks, and use John Dunning's plugin to export a symbol directly to Edge Animate:
http://johndunning.com/fireworks/about/EdgeAnimate

Responsive scaling of animation in Edge Animate

I am inserting an animation into a responsive web page. I have gotten the design to scale in either direction (horizontally and vertically) in both Animate and a browser but cannot get the animation to scale in both height and width when the browser window size is just narrowed or the page is served up to a mobile device (tablet or phone.) I created a simple test comparison at this link: http://www.users.cloud9.net/~agoltz/edgeTest/animateTest.html I've embedded the CSS styles in the document so they can be evaluated (be kind...I'm an amateur)
If the browser window is narrowed the animation just gets narrower but doesn't scale vertically. The static image scales in both directions as the width of the window or device narrows. I'm looking for the same behavior with the animation. I hope I'm just missing something (not an unusual occurance) and not that this is a limitation of Animate since Flash is no longer a universal option. Any thoughts? Thanks.

Hi Rodlab2x
Thank you for sharing your tests. Interesting to see comparison between Amazium and Bootstrap. Which is which by the way?
I'm impressed, particularly with the first one (http://www.lab2x.com/pacificdental/) because it almost appears to be scale-to-fit in places. In fact, for a moment, you had me fooled and I thought you'd solved it!
I think you've come up with probably the best possible solution at the moment.
Let me just check that I've understood your site correctly?:
You have 3 versions of the header panel that the site swaps to as the browser size is reduced:
1. The large one. This is an Edge Animate animation and uses all the feature in the 'Resize' lesson - ie. it scales horizontally but the height remains the same.
2. The middle one. This is a smaller Edge Animate animation with the same features as above.
3. The small one. (This is the one that fooled me for a moment!). This may be Edge Animate - BUT it's not an animation at all. It is a still image - and therefore able to scale proportionately
Just a suggestion - you could go further and add some animation to the smallest header. If you only use images, not graphics, then you can achieve scaleable animation. Just try making the graphics png files with transparency. Might help if each layer png is the same width and height as the background image. Only issue is - I don't know if the file size will be prohibitively big.
Cheers

How to replay entire composition including video and other animation in edge animate cc 2014.1

I am working on a project but i am stuck now. The basic flow of my project is: intro slides then a video plays then next and back buttons fade in that will control the next set of slides. Another button to replay the whole thing from start. My problem is i am able to replay the slides but not the video. My slides consists of text animations. I am using the new edge animate cc 2014.1 All the slides play from the beginning but the video does not follow that lead. I also managed to replay the video but thats not the desired thing i want. I want the whole composition to play again when i click a button. Can anyone help ?

The problem is with the playReverse call for time duration in which video is there.
playReverse actually plays in timeline in revere order 5sec->4sec->...->0sec, but this won't work for video as it doesn't play the video in reverse.
what you can do is that, in the "previous" button click handler, add
     if(sym.getPosition() > 7750) {
       sym.playReverse();
     else {
       sym.$("trance6")[0].pause();
       sym.$("trance6")[0].currentTime = 0;
       sym.play(0);
Also in "start" button click handler there needs a correction as below:
     Use this sym.$("trance6")[0].play();
     instead of sym.$("trance6")[0].play("1");
hth,
Vivekuma

Is there a way to use angular.js in edge animate

I am trying to add angular.js to my edge animate composition to use for a game. I want to use ng-model in input fields to store player information. I can't seem to get this to work by using. I have added the angularjs script using the add script feature and yepnope way. and this is what i have for my input field and label I want it to be binded to.
var namelabel0 = sym.$("nameInput0");
namelabel0.html('<form name="myForm" ng-app="" ng-controller="Ctrl"><input type="text" name="input" ng-model="user1"></form>');
var namelabel1text = sym.$("Text");
namelabel1text.html('{{user1}}');

I haven't tried this but I'd presume you would have to treat the angular js code the same way you'd treat custom external js scripts: that is use the AdobeEdge object. See my reply to this question:
Access the embedded Edge animation through Javascript
Peter Small

Flash Timeline Animation to Edge Animate CC?

I have a client with an old Flash CS4 Presentation file that uses Forms and Slides and they want to update their presentation to HTML. I am not concerned about the presentation functionality or shell as my developer will create a new one... But, the presentation contains a bunch of timeline animations that demo their product.
I don't want to export the animations out using the Canvas tag, or as a movie or image sequence.
I am new to Edge, but I am thinking this is the solution for the animations.
Is there a way to export/import these Flash timeline animations into Edge? Or even, at the very least, import the assets into Edge?
Thanks,
Carol

What kind of animations do you have? If you have scenes in Flash you can reproduce that in Edge Animate with symbols. For small animations like a runner for example you can create a spritesheet with Flash and use it in Animate. You will have to use the clip tool and display on/off to set it up. Rigth now it takes several tools to go from Flash to Animate but Animate is quite adequate to reproduce what was done in Flash.

How do I use Typekit fonts within Edge Animate

I have applied a 'Pragmatica' Typekit font to a website. I'm using Edge animate to construct some pages and within these pages want to add Type; however, Edge Fonts does not include the Typekit font 'Pragmatica' and the instruction for the page to use Typekit seems not to filter through into the Edge animate section .... is there a way round this?

Hi, Trimmertop-
When you open up the Web Fonts viewer, you will see Edge Web Fonts by default. However, there is a tab next to it that says "Custom." You can stick in your kit code in that location.
-Elaine

How to add css styling to Edge Animate elements?

I have done a complete search on this, and have tried based on the example here: http://forums.adobe.com/thread/979124?promoid=KBHBD
But I can't seem to get it to work...
I am trying to justify text created in Edge (in which I named the div "bio" in the properties panel) using this method in document.compositionReady - $("#bio").css("text-align","justify");
But it won't work.. I can't find many examples of using css to style divs in Edge so can someone help me?
ALSO - to help others who may have the same question, would you also be able to explain to noobs what the generic proper method is?
Thanks all!
Aza

Here is the code for FF:
sym.$(""").css("background-image", "-moz-linear-gradient(top, #8f8f8f, #ffffff)");
There is an error in your code: You need to replace : by ;
sym.$("Q1_Ellipse_1837Copy4").css("background-image"; "-webkit-linear-gradient(270deg,rgba(226,124,124,1.00)0%,rgba(198,15, 15,1.00)50%,rbga(135,25,25.1.00)100%");
or you can use the css with style format {}
sym.$("Q1_Ellipse_1837Copy4").css({
"background-image": "-webkit-linear-gradient(270deg,rgba(226,124,124,1.00)0%,rgba(198,15, 15,1.00)50%,rbga(135,25,25.1.00)100%"
But it does not work in Chrome, though it works with the gradient panel in Edge. It works in FF.
I will try to do some research on it.

Exporting flash cc html5 animation to edge animate

I want to create an interactive animation for PC, cellphones tablets etc. Since most cellphones do not support flash I decided to do this in HTML5. Flash cc supports html5 canvas but the response time of the simple buttons I created is just awful and buggy. After researching I found out that everyone suggest Edge for html5 content. My problem is in edge I do not have any brush or pen tools which I need for my animations. So I would have to create vector animations in flash and export them to edge. I have found absolutely nothing to do this. I can either export as swf which the majority of cellphones do not support or videos that are non vector or non vector image sequences. I can publish flash cc html5 canvas as html/js but I cant Import it to edge. Am I missing something or why isn't this possible?

Hi Alhab
One way to do this is, exporting your content from Flash to Edge Animate as sprite sheets. The following discussion might help you to bring your content from Flash to Animate.
created animation in flash turn it into a rollover
Let us know If you need more help.
Thanks
Manigandan

Can't get my animation in edge animate to work

here's my code, I can't figure out what exactly is wrong. None of my animations for my content are working when clicking on the corresponding buttons within my webpage.
this is what i believed would work:
var mySymbolObject = sym.getSymbol("homeright2");
mySymbolObject.play("homeright3");
var mySymbolObject = sym.getSymbol("hometoptext2");
mySymbolObject.play("hometoptext3");
var mySymbolObject = sym.getSymbol("homeleft2");
mySymbolObject.play("homeleft3");
// Show an element
sym.$("homeleft2").show();
// Show an element
sym.$("hometoptext2").show();
// Show an element
sym.$("homeright2").show();
// Hide an element
sym.$("xboxone").hide();
// Hide an element
sym.$("macbookpro").hide();
// Hide an element
sym.$("bose").hide();
// Hide an element
sym.$("productstitle").hide();
// Hide an element
sym.$("applemic").hide();
// Hide an element
sym.$("geeksquadtext").hide();
// Hide an element
sym.$("geeksquadlogo").hide();
// Hide an element
sym.$("appletv").hide();
// Hide an element
sym.$("dealtitle").hide();
// Hide an element
sym.$("COD").hide();
// Hide an element
sym.$("nexus").hide();
// Hide an element
sym.$("toshiba").hide();
// Hide an element
sym.$("applestore").hide();
// Hide an element
sym.$("shopstitle").hide();
// Hide an element
sym.$("samsung").hide();
// Hide an element
sym.$("mag").hide();
// Hide an element
sym.$("microsoft").hide();
// Hide an element
sym.$("midtext").hide();
// Hide an element
sym.$("toptext").hide();
// Hide an element
sym.$("phone").hide();
// Hide an element
sym.$("contacttitle").hide();

it seems to be working now, there was an error on my timeline.
now the only problem I seem to be having is embedding a YouTube video within the page.
using this code:
var youtube = $("<iframe/>");
sym.$("video12").append(youtube);
youtube.attr('type','text/html');
youtube.attr('width','540');
youtube.attr('height','315');
youtube.attr('src','http://www.youtube.com/embed/_JY4ZV_fumU?rel=0');
youtube.attr('allowfullscreen','0');
the video displays but it's like the container symbol is over top of it, so I can't play the video.
Any ideas?

When I export an HTML5 animation from Edge Animate into Adobe Captivate 8, is there a way to resize the animation once in captivate to fit all devices (PC, tablet, mobile)?

I have a hard time getting the animation to fit all sizes...
Thanks for the help!

That is probably it!
How do I make it responsive?

Embedding audio and animation into DPS using Edge Animate CC

Hello all,
I'm using all CC programs.
I've created an animation in Edge Animate that I would like to place into my InDesign doc for DPS.
The animations match up with sound file that I've imported into my EA file. I've tried using the buzz.js script (step-by-step as per the video tutorials I saw), but to no avail.
Is there a way to place/embed the animation along with the sound for DPS?
The animation will need to be simultaneously activated by the user to play.
Thank you very much in advanced for your help—hopefully there is a solution or some sort of work-around!
lv

Would you be able to supply a link to your past messages? I'm not sure what messages you're talking about.
Also, I do not need an audio over an audio—just one that plays while an animation plays.
Would that be the same concept?
Thank you.

Is it possible (or feasible) to create an entire website full of animations using Edge Animate?

Back when Adobe Edge preview first came out I tried making this site:
http://www.bluekanji.net based on a friends request to have everything animate, with sound effects, music, etc. It didn't turn out too well and the coding is a mess because of my lack of coding knowledge and trying to jam stuff in there when Edge didn't allow it at the time.
I'm currently recreating the site from scratch, but hoping to make it all one cohesive page, instead of every animation having to be on a new page.
My main issue now is that when I have any animation play the next one will overlap and block one another and it becomes a pretty big mess. So my question is is it possible to do a full site full of animations with Edge Animate (and/or with Edge Reflow)? Or is it better to try something else?
Thanks.

There has been many new features added post the preview releases. You can check the below links for information on what added in 2.0,3.0 and CC 2014 releases.
Latest Version: https://helpx.adobe.com/edge-animate/using/whats-new.html
EA 3.0: https://helpx.adobe.com/edge-animate/using/whats-new-edge-animate-30.html
EA 2.0: Edge Animate Help | New features summary
I would recommend you to try Edge Animate/Reflow/Muse for creating websites and let us know if you encounter any issues.
-Sujai

Custom CSS Is Crashing Adobe Edge Animate

Below is the HTML and CSS for a basic page, with one style. When I open it in Adobe Edge Animate and then create a shape, and set the class of that shape to "mystyle" it displays fine in the Edge Animate window (except the border style appears missing). However, as soon as I try to move the shape, Edge crashes - consistently every time. If I create a DIV on the page outside of Edge Animate first, and apply the CSS to it, then open the page in Edge, I can move the shape around - but I lose several style options in the Properties panel such as Filters and a couple others.
I'm trying to get a better understanding of what would be the best workflow when trying to use Edge to animate existing web page layouts - creating the animations and DIVs entirely in Edge first then placing the animation into an existing layout, or creating a page layout in something like Dreamweaver (along with all my other custom CSS), then opening it in Edge to animate it.
I saw elsewhere where someone explained how to attach an external style sheet instead. This seems to work without crashing, however I cannot see the rendered style on the stage itself, only when I preview the animation in a browser.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.mystyle {
          width: 248px;
          height: 200px;
          margin-right: 10px;
          margin-top: 10px;
          float: left;
          border: 1px solid #b6b6b6;
          -moz-border-radius: 20px;
          -webkit-border-radius: 20px;
          border-radius: 20px;
          -moz-background-clip: padding;
          -webkit-background-clip: padding-box;
          background-clip: padding-box;
          background-color: #ebebeb;
          -moz-box-shadow: 3px 4px 5px rgba(0,0,0,.1), inset 0 0 10px rgba(255,255,255,.75);
          -webkit-box-shadow: 3px 4px 5px rgba(0,0,0,.1), inset 0 0 10px rgba(255,255,255,.75);
          box-shadow: 3px 4px 5px rgba(0,0,0,.1), inset 0 0 10px rgba(255,255,255,.75);
          background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d 3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiI HByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0 ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwM mUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIi8+Cjx zdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlYmViZWIiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZ XQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iNTElIiB zdG9wLWNvbG9yPSIjZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSI5OSUiIHN0b3AtY29sb3I9I iNkNmQ2ZDYiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmQ2ZDY iIHN0b3Atb3BhY2l0eT0iMSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9I jEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
          background-image: -moz-linear-gradient(bottom, #ebebeb 0%, #ebebeb 0.27%, #ebebeb 50%, #fff 51%, #d6d6d6 98.93%, #d6d6d6 100%);
          background-image: -o-linear-gradient(bottom, #ebebeb 0%, #ebebeb 0.27%, #ebebeb 50%, #fff 51%, #d6d6d6 98.93%, #d6d6d6 100%);
          background-image: -webkit-linear-gradient(bottom, #ebebeb 0%, #ebebeb 0.27%, #ebebeb 50%, #fff 51%, #d6d6d6 98.93%, #d6d6d6 100%);
          background-image: linear-gradient(bottom, #ebebeb 0%, #ebebeb 0.27%, #ebebeb 50%, #fff 51%, #d6d6d6 98.93%, #d6d6d6 100%);
          overflow: hidden;
</style>
</head>
<body>
</body>
</html>

You could use the styles inside Edge Animate directly in compositionReady. If you have an earlier version of edge for the gradient do:
For example:
sym.$('Stage').css({
'background-image': '-moz-linear-gradient(bottom, #ebebeb 0%, #ebebeb 0.27%, #ebebeb 50%, #fff 51%, #d6d6d6 98.93%, #d6d6d6 100%)',
          'background-image': '-o-linear-gradient(bottom, #ebebeb 0%, #ebebeb 0.27%, #ebebeb 50%, #fff 51%, #d6d6d6 98.93%, #d6d6d6 100%)',
         ' background-image': '-webkit-linear-gradient(bottom, #ebebeb 0%, #ebebeb 0.27%, #ebebeb 50%, #fff 51%, #d6d6d6 98.93%, #d6d6d6 100%)',
          'background-image': 'linear-gradient(bottom, #ebebeb 0%, #ebebeb 0.27%, #ebebeb 50%, #fff 51%, #d6d6d6 98.93%, #d6d6d6 100%)'
You can add the other properties between the {} with the same format:
'propertyName':'value',
Newer versions of Animate have gradient from color panel.

Using CSS animations in Edge Animate without .js

Similar Messages

Maybe you are looking for