Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'animate'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. GreenSock

    Flip Plugin

    The Flip Plugin seamlessly animates between states dynamically with minimal code. The video explains more... VIDEO All you need to do is get the initial state using Flip.getState(targets), make whatever changes you'd like to the DOM or styling, and then call Flip.from(state). GSAP handles the rest! Of course like all GreenSock tools, there's a rich API for finessing things and getting exactly the look you want. "FLIP" is an animation technique that stands for "First", "Last", "Invert", "Play" and was coined by Paul Lewis. Here's a demo of how it works: See the Pen How GSAP's Flip Plugin Works by GreenSock ( @GreenSock) on CodePen. Feature highlights Nested transforms? No problem! Most FLIP libraries only calculate basic offsets assuming no transforms beyond x/y, so a scaled parent breaks things. Rotations certainly aren't allowed. GSAP's Flip plugin just works. Set absolute: true to make elements use position: absolute during the flip. This solves layout challenges with things like flexbox and grid. One flip can handle multiple elements and even stagger them. Resize via width/height properties (default) or scaleX/scaleY (scale: true) You get the full power of GSAP under the hood, so you can use any ease, define special properties like onComplete, onUpdate, repeat, yoyo, and even add() other animations with total control of timing, etc. Apply a CSS class during the flip with toggleClass. It'll be removed at the end of the flip. Flip.fit() repositions/resizes one element to fit perfectly on top another (or even a previous state of the same element). It's as easy as Flip.fit(".box1", ".box2"). Add tween properties to make it animate over time, likeFlip.fit(".box1", ".box2", {duration: 1, ease: "power2.inOut", absolute: true}). Compensate for nested offsets, like if a container element is getting flipped along with some of its children and you don't want the offsets to compound (nested: true) Smoothly handles interruptions. Flip one element to another and have them cross-fade (fade: true). For example, a thumbnail image flips to the full-resolution, full-screen image that's a different element completely, but the user just sees the thumbnail seamlessly transition into the full-screen one. Simply set the same data-flip-id attribute on both to match them up. onEnter and onLeave callbacks for when elements enter or leave (like if the flip senses a display: none toggle and there's no matching target to swap), making it easy to elegantly animate on/off elements. Simple example See the Pen FLIP swap element positions by GreenSock ( @GreenSock) on CodePen. Flex example See the Pen Flipping Flexbox by GreenSock ( @GreenSock) on CodePen. Advanced example See the Pen Grid item view with FLIP plugin by GreenSock ( @GreenSock) on CodePen. Learn and see more Want to learn more? the Flip docs are the best place to go. View the Flip showcase View all of the Flip how-to demos Get your hands on the FlipPlugin The FlipPlugin is a bonus plugin for Club GreenSock members ("Shockingly Green" and "Business Green" levels). It's our way of showing our gratitude to those who are fueling innovation at GreenSock. To download the FlipPlugin, just log into your account dashboard and grab the latest version of GSAP. Don't have Club GreenSock? Try the FlipPlugin for free on CodePen! There's a special but fully-functional version of the FlipPluginthat we link to in our demos in our FlipPlugin Collection on CodePen, so feel free to fork any of them and take the FlipPlugin for a spin. Note: the special version of the plugin will only work on the CodePen domain. To find out more about the many benefits of being a Club GreenSock member swing on by the club page and be sure to check out the other premium plugins.
  2. 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
  3. 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?
  4. 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!
  5. 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
  6. 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....
  7. 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.
  8. 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!
  9. 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 });
  10. 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 ?
  11. 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:
  12. 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).
  13. I'm trying to expand the content using GSAP, so I can have the height animated of the hidden content. If you click the "Sterilisers" button/product, you expanding the content. I applied GSAP but with not the expected result. Please advice what's the best way. $('.js-tile').richTile().on({ 'expanded.RichTile': function(event, tile) { // disable siblings on expand var siblings = tile.element.siblings('.js-tile'); siblings.richTile('enable'); siblings.richTile('collapse'); var currentTile = $(this); var $tiles = $('.js-tile'); $tiles.not(currentTile).addClass('not-expanded'); console.log('click 1'); TweenMax.from(".Tile.is-expanded .Tile-flyout", 0.8, { height:0 , opacity: 0, autoAlpha:0, ease: Power1.easeOut }); // re-enable when this tile is collapsed tile.element.one('collapsed.RichTile', function() { siblings.richTile('enable'); $tiles.not(currentTile).removeClass('not-expanded'); console.log('click 2'); TweenMax.from(".Tile-flyout", 0.8, { height: 0, opacity: 0, autoAlpha:1, ease: Power1.easeOut }); }); } });
  14. 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!
  15. 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?
  16. 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.
  17. Hey there, I need a zip file of Adobe Animate CC (trial.)
  18. 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.
  19. Hi All, I'm trying to create a continuously changing polygon animation that uses randomly generated values for the points. I've got it working for the 1st set of generated numbers, but it doesn't use the subsequent set of values. It keeps repeating between the initial shape points and the 1st set of generated points. Any ideas on how to "refresh" the points so it can constantly change the shape of the polygon Cheers
  20. 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!
  21. 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?
  22. I'm building a Pomodoro Timer and want to create a draggable div (assigned with a background-image of a 25 minute timescale) to set a timer and on release the div/image will animate back to the starting position. Can I do this with GSAP? Here's my Codepen: https://codepen.io/iamryandnelson/pen/dRbKMM
  23. Hello, I can't seem to animate a div that contains a youtube video and I have a project that due asap. I want to be able to animate the opacity or the position. The animation either won't occur or the animation will stop before it has completed. Please let me know what I might be doing wrong. Thanks! ::Carey::
  24. Hello fellow animators, if you were previously looking on how to integrate Greensock into a WordPress Website, you have come to the right place. Today we launched AnimateWP, a WordPress animation plugin which is completely based on Greensock. You get the whole power of Greensock animations (browser compatibility, performance, advanced sequencing and all the other great features) without writing a single line of code. The plugin takes care of everything while you implement your timelines and animations on the graphical interface in the WordPress backend. Currently we have implemented almost every property you can animate with GSAP and are already working on implementing the powerful Club Greensock Plugins (like ScrambleText, SplitText and others) in the near future. DrawSVG is already available in AnimateWP. Moreover AnimateWP allows you to trigger and control your animations by scrolling. Therefore you don't have to worry about including ScrollMagic anymore. Check it out on animatewp.yourneeds.at or explore the docs.
  25. 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
×