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
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. 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).
  2. 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:
  3. 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!
  4. 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?
  5. 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.
  6. Hey there, I need a zip file of Adobe Animate CC (trial.)
  7. 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; }
  8. 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
  9. 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.
  10. 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
  11. 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?
  12. 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!
  13. 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
  14. 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::
  15. Hi! I would like to know if there's a way to animate a HTML video. What I would like to do is to add a link to another page on the video, but that link should appear just for a few seconds. For example, the video starts with no animations. Then on second 12, the link appears for 5 seconds and disappears again. I'm thinking of using the video currentTime like this codepen I created: https://codepen.io/sonder15478/pen/Ppeyry Any ideas of how to do it?
  16. Hi, I would like to animate two lines as they move as waves. I want something like this, but with the two lines and moving slowly, like the sea. http://codepen.io/winkerVSbecks/pen/EVJGVj Does anyone know how to do this? Thank you
  17. Hi, I am creating a responsive animation where there's an image on the background and some elements of it are animated. For example, I would like to move a cloud 20% of the screen width, but with the code that I have, it's moving it but of a 20% of the cloud width. Does anyone know how to do it of the screen width instead of the cloud width? This is my code: TweenMax.to('#cloud', 5, { x:"20%", ease:Power1.easeInOut, yoyo: true, repeat:-1 });
  18. Because you are one of the people who knew Flash and understood what made it great, I thought I'd ask. I was originally going to title this post "Any chance Greensock could replace CreateJS in AnimateCC?" Then I realized what I was asking was a little bigger. However, that is the gist of what I'm wondering. Is there a way to use the Greensock library as the engine that drives the animation when publishing from AnimateCC instead of CreateJS? The CreateJS library isn't getting updates (worse than Flash and Air). It's slow on mobile. Interaction is unbearably laggy. It's essentially unusable for any decent experience. But Greensock has always been the bleeding edge of speed, efficiency and stability. If it were powering all the timeline tweens and interactions when users published to html5, Flash could again be a viable tool for creating animation and games on the web. The Flash tool provided a wonderful GUI with which to create animation and games for coders and noncoders alike. When you published, it just worked. Nearly a decade after its 'death' we still haven't found a suitable replacement. Greensock is great. But there are those of us who find it prohibitively difficult to animate with code. And maybe I should just be asking for a Greensock GUI that has a timeline and MovieClips like Flash. But Animate is there. And it might just need the power and performance of Greensock to make it live again.
  19. Hi everybody, im new on gsap...playing with threejs, tween and audio visualizer. I have a group with some mesh as child 1 - I would like to animate each element of the mesh with a value created in RAF . 2 - I would like to make endless tween on rotation (unfortunally , "repeat: -1" its not working). Is there another elegant / better solution for do that. Thanks in advance for any help... On RAF i have some function: 1 for render() three scene and one for analyze the sound and pass the value on tween. So this... // The sound analyzer . function soundAnalyzer() { if ((cristal)&&(frequencyData)){ tl_cristal_rotationX = new TimelineMax({repeat:-1 }); analyser.getByteFrequencyData(frequencyData); if(typeof frequencyData === 'object' && frequencyData.length > 0) { scale_value = 9000 - frequencyData[1] * 35 ; scale_value_Low = 1800 - frequencyData[1] * 5 ; cristal.traverse( function ( child ) { if ( child instanceof THREE.Mesh ) { tl_cristal_rotation = new TimelineMax(); tl_cristal_rotation.to(child.rotation, scale_value_Low, { ease: Linear.easeNone, x: -360 , y: -360, repeat:-1 }) } }); tl_cristal_rotationX.to(cristal.rotation, scale_value , { ease: Linear.easeNone, x: -360 }) } } } // and here RAF loop and Render // animation loop function animate() { if(dae) { soundAnalyzer() } requestAnimationFrame( animate ); render(); stats.update(); } TweenLite.ticker.addEventListener("tick", render); //and render the scene function render() { renderer.clear(); camera.position.x += ( mouseX - camera.position.x ) * .015; camera.position.y += ( - mouseY - camera.position.y ) * .015; camera.lookAt(scene.position); composer.reset(); composer.render(scene, camera); composer.pass(OldVideoPass); composer.pass(BrightnessContrastPass); composer.pass(RGBSplitPass); composer.toScreen(); } Thank u very much and sorry for my English.. hope is readable..
  20. Hello, I'm trying to use the Draggable.create() method with an instance, in Animate CC (HTML), but i can't. I can use TweenMax, but Draggable is not possible. Of course, i added the link (<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/utils/Draggable.min.js"></script>) to my web page. Does anybody succeed in adding a drag and drop technic thanks to the Draggable.create() method? David Archive.zip
  21. Hi All I'm sorry if this is an easy solution but I couldn't find it and I'm totally new. I have several elements with an infinite rotation but for some reason is working only the first one. Here is my code: (function($) { var green = $('.green'), red = $('.red'), brown = $('.brown'), // tl = new TimelineLite(); tl = new TimelineLite(); tl .to(red, 3, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" }) .to(green, 1, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" }, "-=0.15") .from(brown, 3.5, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" }, "-=0.15"); })(jQuery); Thank you so much for your help!
  22. Hey there, I'm trying to use TweenMax to animate an image inside a SVG clipPath. The problem is: when the transition is happening, the clipPath deactivate on Chrome and appears only after animation stops. On Safari and Firefox works just fine. Anyone can help me? Is a compatibility issue or am I doing something wrong? Thanks guys!
  23. Hi Guys! I have a problem with my animation. I don't know why, only when I move mouse scroll or change width of codepen window, my animation start playing. I want to create continuous animation but I don't know what I'm doing wrong.
  24. Hello everyone! This is my first post here having started to learn jQuery very recently. Learning it is very exciting but there's so much to get your head around... I look at lots of websites and try to learn as much as I can. Can you tell me what would be the best way to achieve this effect- http://spain.madeforspainandportugal.com/en/ -background image looping around a circle or a path? Many thanks in advance!
  25. Hello all, a newbie here. I looked through the docs and examples, but am still a bit unsure whether the Timeline scripts could help me out with a project I'm tasked with. The project is a rather straightforward animation created in Flash/Animate which needs to be exported as SVG. The animation has four points at which the animation would need to stop. Each 'stop point' would have a corresponding button which moves the playhead backwards or forwards, depending if the clicked button is before or after where the playhead currently is at. As you might know, scripts do not go with the SVG when exporting it from Animate and so the solution would be to apply JavaScript or some such library to handle not only the navigation, but stopping the playhead at the 'stop points' or labels. Here are my initial questions/problems: * Using the TimelineLite/Max one can sequence tweens into a single timeline, but is it possible to add a single SVG animation (exported from Animate) that can be controlled with TimelineLite/Max? * Are the 'stop points' possible to implement with, say, applying labels at certain points (e.g. in seconds)? Please let me know if something needs clarification. Thanks in advance!
×