Search the Community

I am trying to use MotionPath to animate along a path and it is getting the correct data for how it should move but is not actually on the path which is what i need. The code pen shows this issue. The ship "orbiting" should follow and be on the red path.

Hi So I'm a bit of a newbie when it comes to using Greensock and I also have an animation that was created by someone else. :-/ The animation uses GSAP to produce a bit of a lengthy animation that needs to be exported as an MP4 file. The animation is divided up into indivdual steps by adding labels for each one e.g.: TimelineMax.add("step1"); ..... TimelineMax.add("endStep1"); I have the original FLA file, so that I can change the current step to be played via a variable called 'step', which I can export as a SWF file and all plays fine - the animation starts and finshes at the desired step, objects turn on and off, tween etc. However when I try to export as an MP4 file the animation doesn't play correctly and appears to start mid-way through an earlier step. :-/ I'm exporting as follows: File > Export > Export Video Checking 'Convert video in Adobe Media Encoder' Setting 'Stop exporting' to 'After time elapsed' and entering plenty of seconds Export as a MOV and open in AME to output as MP4 So far I've tried everything from inserting enough frames in the timeline to actually taking the working SWF and using something like HD Video Convertor Factory but with very poor results. I just don't understand why it plays fine as a SWF file but completely different when exported as MP4? Anyone else had a similar issue? Unfortunately I can't supply a codepen because I have to adhere to data export restrictions. Many thanks Rich

please help me !! Sorry for the Google translation ( ㅠ_ㅠ) <style> .parent{width:500px; height:500px; background-color:#000} .parent .child1{position:absolute; width:100px;height:300px; display:none; background-color:#f00} .parent .box1{position:absolute; width:50px; height:50px; background-color:#0f0} .parent .child2{position:absolute; width:300px;height:300px; display:none; background-color:#00f} .parent.on .child1{width:50px; height:500px; display:block; background-color:#ff0;} .parent.on .box1{width:30px; height:30px; left:300px; top:300px;} .parent.on .child2{width:500px; height:30px; display:block; background-color:#0ff;} </style> <div class="parent"> <div class="child1"> <div class="box1"></div> </div> <div class="child2"> </div> </div> TweenMax.to(".parent", 1, {class:"+=on"}) //Does not work TweenMax.to(".parent .child1", 1, {class:"+=on"}) //Does not work I know that you can animate through classes. BUT How can I animate child elements through a class of parent elements?

Hello How can I draw a line with animation on canvas? I want to draw animating line on my canvas chart can I draw a line using as lineTo canvas method and make animate it with GSAP?

Hi all, I've been using GSAP for awhile now, but am new to using Adobe Animate with GSAP. This is probably a simple question, but I can't seem to find out why scaling up objects in Adobe Animate using GSAP causes those elements to become extremely pixelated. Is there some kind of setting I am missing in Animate? Thanks!

Hi... new guy come to the pool. I'm Hadi. Followed tutorial from Petr/ihatetomatoes, and then the issues is come up. First, all the header and navbar is working with tweenlite, but after I put the container which are the main-page and footer. It's not working anymore. What's wrong here? And about the code pen, I don't know why the animation won't moving there. But still the code is working fine on my file that I mentioned previously. I'm sorry, lil shy to come with noob question. But I don't have mentor to ask directly. Thanks for the help. Regards, Hadi EDIT: omg, now in codepen all the animation is working well, but still in my file just header and its nav which working. But for footer and main-page still not. So, what is the problem actually?

My very long "origin" story follows. TL/DR: I've attached some templates that people might find useful if they are building ads for AdWords using Adobe Animate CC 2017. <--- begin long story ---> I'm very new to HTML5, but I have many years of experience with Flash. That said, I'm a designer, not a coder, so trying to figure out what path I should take to move from Flash to HTML5 was like wandering around lost in a jungle, sans-machete. The last time I made the effort to learn how to make HTML5 ads was a couple of years ago and was less than successful. I ended up landing on Google Web Developer, since that appeared at the time to be the only HTML5 program that AdWords would accept ads from. That was so incredibly frustrating that I ended up going back to Flash CC 2015, animating the ads, then back saving the files to CS6 so I could publish them with the highest level of the Flash Library that AdWords would accept. Due to how long that process ended up being, we transitioned to using static ads instead of animated ads, and our clients were fine with that. I was relieved. All was right(ish) with the world. I was content to leave HTML5 behind and pretend like I would never need to figure it out. That ended in February. We have a client that wants to start running animated banner ads through AdWords. Back into the jungle I went. After learning that AdWords will no longer accept .swf files, I picked up GWD once again, and took a day to put together one ad that would show the client that we could do animated ads. If anything, GWD felt worse than it did two years ago. I banged my head against the wall trying to get text to do what I wanted, and ended up creating SVG shape files instead. I eventually got the ad mostly working. Sometimes a background shape didn't do what it was supposed to, and nothing seemed to fix it. It was not an ad that I was very proud of, but at least it was working. Mostly. I also calculated that it took me eight times as long to build that ad as it did for me to make a static ad. I sent the example ad off to the client and didn't hear anything back until last week. He sent us links to some ads that he liked, and asked if we could do something like that. They were pretty basic, the one he really liked was a bit sloppy, but I replied that we could do that, and also pointed him back to the example ad that I had sent before. Apparently his missed it, because he said that he loved it. It was exactly what he was looking for. For the heck of it, I decided to take a look at the code for one of the ads and see if it was made in GWD, or something else. Really hoping for something else. Around the middle of the HTML file, I saw, "UPDATES AND DOCS AT: http://greensock.com"... That's what led me here. Through watching videos, and searching the forums, I learned that Adobe Animate was basically Flash – or Flash enough that the learning curve would be pretty shallow – and that it could incorporate GreenSock. Oliver16Years was particularly helpful in pointing me down the correct path regarding the use of Animate versus hand coding, and that saved me quite a bit of time. The next hurdle I had to overcome was building an ad in Animate and getting it through AdWord's HTML5 Validator. I rebuilt my original ad, and when it came time to run it through the Validator, I got two errors; one involving missing this code from the <head> section: <meta name=“ad.size” content=“width=300,height=250”> Which I already knew about, and just forgot. The other involved fonts, which surprised me because I was using Google Fonts. Apparently, when Animate publishes the files it links to the Google fonts in a way that makes AdWords sad. Looking at the code, I couldn't figure out what needed to be changed. I asked for advice in another forum post and ohem helped out with his reply saying that I would be better off sticking with static text since Animate would automatically convert it to shapes when the file is published. So I've sidestepped that issue for now, and will revisit it if I need to down the path. I fixed those two things, resubmitted, and then got another error. Apparently, I needed to find this line in the published HTML5 file: <script src=“https://code.createjs.com/createjs-2015.11.26.min.js”></script> replaced with this: <script src=“https://s0.2mdn.net/ads/studio/cached_libs/createjs_2015.11.26_54e1c3722102182bb133912ad4442e19_min.js”></script> So I did that. Resubmitted, and then got an error for how I was direct linking the ad to a URL instead of using "clickTag"... Yeah, I remember click tags from my Flash days. I get it. You gotta track those clicks. The solution was (or appears to be) to add this script code to the HTML5 file (I put it below the <title>): <script type=“text/javascript”> var clickTag = “”; </script> And use this for the button code: this.btn_main_link.addEventListener(“click”, fl_ClickToGoToWebPage); function fl_ClickToGoToWebPage() { window.open(“clickTag”, “_blank”); } ... I believe that is correct. At least after doing that and resubmitting it, I didn't get any more errors. All of that was a lot of jumping around in the code side of things that I really didn't want to be doing, especially if/when we start rolling out animated ads to our other clients. Surely there was a way to make this work automatically? Why yes, yes there is. Thanks to this other forum thread I came across, I learned that I could go under the "Publishing Settings / Advanced" tab in Animate, and export the "Template for publishing...", modify what I needed to modify, and then import it back in. I totally took advantage of that. I set up the file so it would have all of the code changes, as well as including the GreenSock library. I tested the published file using the AdWords Validator, and everything was green. Then I made the other two common sized ads that we are always needing to make, to give us a full set: 300x250, 160x600, and 728x90. Then, because of a number of our clients are car dealers and have lengthy disclaimers that we need to cram into the ads, I made a modified set similar to what I used to do in Flash for a huge account at a prior job that include a rollover "disclaimer" button. I tested those in the Validator as well, not expecting them to work, but they did. They may not work when actually uploaded to AdWords though; I'm a designer, so I don't have access to that side of things to test. <--- end long story ---> I've attached my current set of templates to this post. They are set up with all of the basics you need to satisfy the AdWords gods (at this time, and as far as I know). 160x600, 300x250, 728x90 (two sets; one with a rollover for disclaimers and one without) built in Adobe Animate CC 2017 30 fps 1px black border (locked)... there may be a better way to do this. I fell back on my Flash experience when setting it up, but I'm certain there's a way to add a border to the ad through HTML. It was a low priority right now. click area (locked & hidden) 300 frames (10 seconds) already added to the timeline stop code on the 300th frame the GreenSock Library should already be include and working (it's included when published), but I haven't tested that part yet (still learning my way around GreenSock), and – again – I'm a designer, not a coder, so I may be missing something there I have not used these yet for actual ads that are up and running on AdWords. Once I have, I'll report back, and if any changes are needed to make them work, I'll replace/update the zip file. --- (edit) The rollover part of the rollover banners, as they are now, do not work when uploaded to AdWords. I will see if I can figure out what has to be done to make it work (if anything CAN be done). If any of you guys have an idea how to fix them, please let me know and I'll get the fix in and updated asap. --- (edit 2) Thanks to the responses below, I seem to have fixed the rollover issue so they work now with AdWords. I also caught a few more errors that I fixed as well. A new zip file has been uploaded. Until I actually use them for a campaign, I'm not 100% sure they will fly, but I'm hopeful. If anyone has a chance to use them before I do and would like to say how they worked, I would appreciate it. The disclaimers are in OpenSans, but you can change them to whatever works best for you, of course. Animate CC 2017 HTML5 Templates-AdWords-v2.zip

Hello, I have been looking into getting a smooth scrolling effect using GSAP. After looking into Scroll Magic, I realised that what I want to achieve can be done using just using a GSAP timeline. I found something on Codepen which had a similar look to what I was after. I have tweaked this myself but have come to point where I need a bit of help/advice. Basically, my webpage will consist of one page made up of 3 full width sections, each one being 100vh/% in height (so 3 separate panels). The first panel will contain some information and a background image. The second panel will also contain some content but will have a background video applied instead of an image The third will be the same as the first, only with a different background image being used. What I'm trying to achieve to have the panels transition into one another smoothly as you scroll. A simple opacity swap and scale tweak so that as you scroll down the page, panel 1 fades into panel 2 and then panel 2 fades into panel 3. I am having some difficulty with my timeline I think. Currently the top 2 panels fade into each other quite well but I'm having difficulty adding the 3rd panel into the mix. If anyone can offer any advice/help on this then it'd be much appreciated. My codepen URL is https://codepen.io/anon/pen/ZobLYL

Hello everyone... This is my biggest problem in Adobe Animate AS3 ever. So the problem is- I have 8 SWFs which have separate topic in each and one main SWF file and i want to connect all of them together like- Firstly i open Main SWF then it shows all the 8 topics name with each button. i used script from code snippets which is 'Click to load/unload SWF' and i assigned all the SWF as it required to open. I have created a button in each SWF to go back to main SWF using same code as i mentioned.... It is working properly but i realized that each time i click to open new SWF, it overlape on old one and when i open multiple times all SWFs, it become very heavy and get legging and hangs very much, consumes more memory... So what can i do to load new SWF and unload all previous SWFs by clicking on same button in each SWF ??????? Please give some idea with whole detailed script which i have to paste with button name and file name(u can assume any button name and file name). As i don't have enough knowledge about writing manual code. Please give some positive response. Thanks....

Hi all, I am doing an interactive exhibit for my school's graduation showcase. In one of the exhibit, I implemented Tracking.js, which could detect colours using a webcam. The effect I want to apply is that, once the webcam detect a specific color, it will append the empty h1 and p tags conditionally (example: if detect Red, append h1 to Header A and p tag to Text A, if detect Blue, append h1 to Header B and p tag to Text B). I use jQuery's .text() function to edit the empty h1 and p tags once it detects a colour. However, the effect is quite abrupt. Is there anyway to use GSAP to animate it? P.S: In the CodePen, I did not put in Tracking.js as CodePen could not access the webcam. I used the .click function to show the .text() abrupt effect I was referring to.

I am trying to create a minimap for a little game. First i started creating a full map in SVG, and then animated the player icon alongside the path. But is it possible to reverse the behaviour, so that the player icon stays, and the path itself, is animating, moving and rotating anchored to the player icon? Just like the image below. Any help is highly appreciated. current code: motionPath = MorphSVGPlugin.pathDataToBezier('#motion-path', {align:'#player-dot'}); TweenLite.set('#player-dot', {xPercent:-50, yPercent:-50}); tl.to('#player-dot', 2, { bezier:{values:motionPath, type:'cubic'}, ease: Power0.easeNone });

Hi there! I am making a png spritesheet animation. I have an animation existing of 7 frames which I want to animate back-and-forth. So: from frame 1 to frame 7 back to frame 1 again and back. Example: 1,2,3,4,5,6,7,6,5,4,3,2,1,2,3 etc. I tried reversing with "yoyo:true" but i cant quite get a seamless experience as you can see from the Codepen. The animation goes back to frame 1 before getting into yoyo. I would love some advice from you. Any advice would be appreciated!

I' m sorry, but i start using gsap, from a few days, so my question may be a little silly... which is the best way to animate css background-position property? I've tried doing: TweenMax.to('.back', 8, {'background-position':300}); where '.back' is the element with background image. .back { background: rgba(0, 0, 0, 0) url("img/seq2_0000.jpg") no-repeat fixed 0 0 / 200% 100%; } but what i'm tryng to get is a kind of 'seamless loop' in the background for example a sky and clouds horizontal moving. Anyway GSAP is amazing!!!

Hello, First of all great tool for animating. I just start play with this and i want to create animation to circle around border of div. I create little pen for experiment but i can't figure out how to set transformOrgin just right. Is it possible to have some params from js as passing arguments ? If i change size of my circle div to animation follows ?

Note: when you open the Codepen scroll down to the bottom Hello there! I'm a JS/HTML5 newbie trying to animate an IRC chat using HTML5/JS in Animate CC. My goal is to dynamically create rounded rectangles with text from the chat and load them onto the canvas from the bottom. New messages would pop up from the bottom of the list and push the other messages upwards. Currently, I have the WebSocket set up and listening to messages. When it detects a message it sends it to the queue where it checks if any animation is currently playing, then if not it generates a rounded rectangle and the message text and animates it coming up from the bottom of the screen. My problem now is, if I send another message, another instance of this rounded rectangle is created and animates on top of the old one. I tried instead pushing each object pair (the text and the rectangle) into an array and then accessing it from there, which works, however, I'm having a little trouble optimising it (I attached a codepen to demonstrate the effect I'm going for and the bloated spaghetti code) (and I don't know if this is the best way to do things). The messages would also need to fade out to the side after a certain amount of time, which would mean new messages need to start lower down again. So, I'm thinking maybe each message has some kind of timer that animates it being removed and removes it from the array so that newer messages can overwrite them? I'm not sure. Does anyone have any suggestions for how I could approach this? Any help would be greatly appreciated, thank you! EDIT: This was my attempt at iterating: (the main attached one is what I'm trying to achieve without manually specifying the Y position, as the height of boxes will be dependent on the size of the message).

The animation is not like I want, it should have a typical collapsing expanding experience. If you click the "Expand/collapse", you'll expand/collapse the content. It doesn't have the expected animation of the height when is scaling , when I click close (X) it shold do the reversing animation. Content should be pushed. console.log('click 1'); TweenMax.fromTo(".Tile.is-expanded .Tile-flyout", 0.8, { scaleY:0 ,transformOrigin:"center top", autoAlpha:0, ease: Linear.easeNone }, {scaleY:1, autoAlpha:1,}); TweenMax.fromTo(".Tile.is-expanded .Tile-flyout > *", 0.8, { scaleY:2,transformOrigin:"center bottom", ease: Linear.easeNone }, {scaleY:1,}); console.log('click 2'); TweenMax.fromTo(".Tile .Tile-flyout", 0.8, { scaleY:1 ,transformOrigin:"center bottom", autoAlpha:1, ease: Linear.easeNone }, {scaleY:0, autoAlpha:0,}); TweenMax.fromTo(".Tile .Tile-flyout > *", 0.8, { scaleY:2,transformOrigin:"center bottom", ease: Linear.easeNone }, {scaleY:1,}); Demo:

Hello, first-time poster here! I'm an HTML5/Animate CC newbie (and not really a dev in general, just doing this for fun and learning) and I was wondering if someone could tell me what I'm doing wrong here. I would like to be able to use GSAP to animate a vector file I'd add to the stage and would need to be able to make it animate when I call a function, however when I try to do this I keep getting cannot tween a null object, but if it's not wrapped in a function the animation plays fine. I created a new HTML5 canvas to see if I had the same problem, and I did: 1. Added a symbol to a blank HTML5 canvas, made it a MovieClip and drew a circle. I called the instance mcThing 2. In the Timeline, I selected the first frame and went into Actions 3. I wrote: function playAnimation() { TweenMax.to(this.mcThing, 3, {y:500}); } playAnimation(); 4. When testing in Chrome, I get cannot tween a null object. If I reference it as mcThing (omitting the this. I instead get mcThing is not defined. 5. If I then remove the function and just have this: TweenMax.to(this.mcThing, 3, {y:500}); It plays fine, but now I can't call it when I need to. Some context: Essentially what I currently have is a WebSocket listening for messages. When it receives a message, it's added to the queue. I am trying to get it to play an animation and insert the text from that message. The text itself should be okay: I used CreateJS to instantiate a text in the code and TweenMax works there, the problem is animating shapes/drawings. I suppose I could instantiate all the shapes in the code itself and TweenMax would work then but I don't think this is realistic as the animation/shapes are fairly complex, so I'm trying to target the stage. The animation would play out, stop, then the message would be removed from the queue and the next one would play (same animation, different text). I think this is a scope issue, but I'm not sure what I need to change. I have used GSAP in AS3 recently and it was working completely fine within functions. Any help would be much appreciated!

Hello I am new to both adobe animate cc (2017) and GSAP and would appreciate a dumb down answer to this question. So I've followed the tutorial of opening an action, opening a url of the zip file that you download from Greensock. It works when working in html5 canvas for adobe animate cc. However when working in IOS air canvas, I can't find how to upload the zip file. Does anyone know if GSAP works with IOS air and how?

hi is anyone one know how to animate text on a curve path, i've attached a snap shot. can you please advice me to get this thing done.

Hey there, I need a zip file of Adobe Animate CC (trial.)

I would like to animate the gradient mask's position from right to left on image, how do you accomplish this using Tweenmax that is compatible for most browsers specially on Chrome & Firefox? **I was able to create a gradient mask in chrome using -webkit-mask-image but mask don't work on firefox** HTML: <div id="gradient mask"> <div id="myimage"></div> </div> CSS: #myimage { background-image: url(image.jpg); width: 259px; height: 194px; }

Hi Guys Can you help me to develop carousel banner with adobe animate, or i have to do it html5 code, can you guys share any sample, thank you so much

Newbie to GSAP! Working on a pen by leelou (thanks leelou!) with a butterfly flying across the screen. Looking at the pen, is there anyway to start the butterfly from off the left side of the screen, and have it fly out the right side? I'd just like the effect of it flying across the screen but without appearing/disappearing into space, regardless of user's screen size.

I want this: https://support.google.com/webdesigner/answer/6212374?hl=en&ref_topic=3243982 to be possible in Adobe Edge Animate. So, I want to load content from a feed from adwords and show it in the ad I've created with adobe edge animate. I can't find how to do this. Anyone has a template or something?

I use Adobe Animate to put my canvases together, not sure if that makes a difference to what I am asking: I have the following code on my main timeline, and it works fine there, with buttons that are also on the main timeline. function buttonOver(theBtn) { thisBtn = theBtn; TweenMax.to(thisBtn, 0.1, { ease: Sine.easeOut, scaleX: 1.05, scaleY: 1.05 }); } However I am having difficulty doing the same thing within a child mc. I have a child clip that contains four buttons that I want to all use this function, and I hope to be able to keep this code within the child clip too, so that it becomes a self contained unit which I can reuse in different projects. I have tried several variations and none have worked. It doesn't necessarily throw an error, just no animation occurs. If I put a console.log in the function it sees and responds to that, it's just ignoring the tweens. I am not sure if it is because the child clip does not know what TweenMax is, or if I am targeting the buttons incorrectly, or something else entirely!