Jump to content
GreenSock

Search the Community

Showing results for tags 'TweenMax'.

  • 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. After a lot of back & forth regarding animation on a current project, I whipped up an export script to translate After Effects CC compositions into TweenMax/TimelineMax documents. I'll be adding more documentation & examples, but if you'd like to give it a try, you can find the script at: https://github.com/Meandmybadself/AfterMax
  2. Hello and thanks and congratulation for this amazing tool. Newbies here, i only know few basics about javascript/jquery but managed -thanks to the extensive documentation and active community- to do what i wanted to do: animate a menu. However i surely haven't done it the cleanest way possible that's for sure, because i collected informations from topics to topics and melted all possible junk of codes in an experimental mix of javascript/jquery.(Soon MIT Licensed). Here is a codepen, there is missing css style so its not particulary pleasant to watch but this is working: http://codepen.io/Rofizzle/pen/myGyJM So, I ended up using a snippet from a greensock demo, because that was exactly what i wanted, however i have never managed to make the reverse method to work, and use another tween to make stuff go in or out, with statements. Is there any way to clean that code with solid reverse method?
  3. Is it possible to tween an object's property if the value of the property contains units (px, %, em, etc)? See code pen example. I'm expecting myObject.left to have a value of '200px' after 5 seconds.
  4. Is there a way to delay the start of a TweenMax, similar to a setTimeout ? setTimeout( function () { TweenMax.staggerFromTo( $box, 0.3, { y: 0}, { y: -100}, 0.10); }, 400 );
  5. So I have 2 problems here, 1. For some reason, the rotation seems to reverse its direction for one of the increment upon completing a full circle. Currently I intend to have the circular blob move through every 30 angles on clicking the button. 2. When I click the button again during the transition, it resets the transition instead of chaining it. I was trying to find ways in which I can chain the animation so that it doesn't reset but allow the user to continue onto the next item. Thanks for any help in advance.
  6. Hi, Have very strange behaviour that is not working only in Google Chrome but works in Firefox. I need to make it work in Chrome, can you help me with a hint? I have a cube with only side pages (without top and bottom) - so I have 4 pages and I rotate them for 90 degrees left and right. Here is the the LIVE example (everything is in a page - libraries are taken from CDN, CSS is inline, no images): http://www.cloomo.com/problem How to simulate the error: Start Google Chrome and go to http://www.cloomo.com/problem Go to the Page 3 (it has green background) and you will see that links "Back 2" and "Page 4" are not working and their text can not even beselected with a mouse. You can come to Page 3 by clicking on "Page 2" > "Page 3" or "Left" > "Left" Can you help me to make these links clickable? Is there an error in CSS styles or in GreeSock library? I can not find it. Another question: Is it possible to make it more smooth? Thanks Alex
  7. So i've watched the GSAP intro videos; they're great. I mean they're so good they made me think I'd be able to use this library straight away. However I am new to coding and web design and while GSAP allows me to do things i'd never be able to imagine doing on the web I'm struggling to control the outcomes. In my codepen I'm trying to use the mouse hover events to initiate a simple tweenmax animation. I want the user to interact the pouring motion by just a mouseover but once the mouse leaves the bounds of the image it would go back to the starting position. I think my js coding is messy and not the best way to achieve this, and I think the revert or restart() functions might be what I should be doing, but i'm not sure on syntax or design. TL;DR. How can I use the timeline feature to revert the tween back to it's starting state upon the jquery mouseleave event?
  8. I want to create a wave movement. A couple of boxes jump up and down one after the other. FromTo does not lead to right result, because the boxes don't go to their previous position. TweenMax.staggerFromTo(".box", 1, { opacity: 0.6, y: -20 }, { opacity: 0.2, y: 0 },, 0.2);
  9. I use different tween function at different points of a script; to clean code a bit, Id like to define things a bit more globally. It might be an obvious question, but I could not find a clue about how to define the easing used in different tweenmax actions as a global variable. Does it have to be accessed or defined specifically ?
  10. Hey everyone so I know that tweenMax has a onComplete function but I was wondering is there anyway that I can setup a tweenMax or tweenLite function to only run 30 intervals of my stages frames per second then once finished call on the onComplete function? I have a movie clip object that is added to the stage every 0.8 seconds and what i wanted to do was when my character picks up a powerup I wanted to have the movie clip object added to the stage every 0.1 seconds but only for a couple intervals or like say 5 seconds then I wanted to put it back to its original time. Is there anything that the tween engine offers to call on a onComplete function for this?
  11. Hello (first of all sorry for my poor english...) I want to stop my animation (drawing svg path using timelineMax and TweenMax) at the end, I try several things but nothing works... My code looks like this : var tween = new TimelineMax() .add(TweenMax.to($path1, 2.5, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path1 for 2.5 .add(TweenMax.to($path2, 1, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path2 for 1 .add(TweenMax.to($path3, 1.2, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path3 for ... .add(TweenMax.to($path4, 1.5, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path4 for ... .add(TweenMax.to($path5, 1.7, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path5 for ... .add(TweenMax.to($path6, 1.7, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path6 for ... .add(TweenMax.to($path7, 1.5, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path7 for ... .add(TweenMax.to($path8, 0.3, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path8 for ... .add(TweenMax.to($path9, 0.2, {strokeDashoffset: 0, ease:Linear.easeNone})); // draw path9 for ... someone have an idea ? Thank you ! Thomas
  12. Hi, i am using scrollmagic but i hope someone here can help me i tried to pin a section which contains an image which gets fadeIn while scrolling. This works fine, but when i scrollUp, the image changes its opacity a couple of times very fast. testet in lastet chrome thanks for any advise or help
  13. Hi, I have been searching for a good example of creating a simple accordion menu, but everything I have come across seems over engineered. 1_I really like the simplicity of this menu: http://codepen.io/ewe1991/pen/agfqA but can't figure out how I could convert the jQuery code to AS3? Does anyone have any ideas? 2_ Could this be accomplished using the blitMask plugin? For example: Set up: 3 mcs that each contain a tab panel portion and a content portion. Have the blitMask to be 1/3 th size of each mc and then when the user hovers over, have the height of the blitMask itself animate top down to reveal the content. --> So based on which mcs is targeted, I would set up a function that would animate the height of the mask and position of the mcs. For example, if user rolls over mc1, blitMask1 would expand down and whatever previously hovered over mc was open would collapse - the blitMask of that mc contracting in height, while the other one is expanding. I have been losing hair over this... Thanks guys!
  14. Tweenmax team: First of all, amazing js, I just love it. I need help with a code that I'm actually working, it's just a Color picker that changes background colors with a bar with no position (an sliding bar), and this bar just changes the background color with hex codes. I need to know if there's a way with Tweenmax to do a smooth transition of the background with the new hexcodes. Thanks in advance, and sorry for my english, It's not my mother language. Regards!
  15. Hi I am theme developer in ThemeForest and I use GSAP for my theme, more exactly I use TweenMax because of advanced functionality it offers, however the problem is that when user purchase my theme, they include some sort of plugins, which in this case one of them uses TweenLite library, so its conflict error and GreenSock gives me this error: http://cl.ly/ZTax So, what is the best solution in this case, I must use TweenMax, while other plugins may include or not TweenLite as well. Thank you very much
  16. Brand new to this, but I'm not seeing the answer out there (maybe I'm looking up the wrong terms). Anyway, I'm doing a few tests, and I'm seeing a flash of the unanimated objects before they come on. For instance, if they animate from 0% scale to 100, they appear for an instant at full size before they disappear and the animation begins. It's only local at the moment, but I see it in both chrome and firefox. I'm using jquery for selectors, and both jquery, TweenMax, and the function to animate are all being loaded in the head before any of the elements are defined in the body html. Is there a typical way to resolve this or most likely cause to look at?
  17. Hey, guys! I'm wondering the best way to setup a somewhat complex situation in which I can control tweens (TweenMax) from multiple timelines (TimelineMax) and/or from timelines and the tweens themselves. This is too involved for a CodePen, but it's likely just conceptual and I'll clarify, further. Here are some givens: I'm using drawSVG, but I think the analogy can apply to any tween. For simplicity, imagine a simple x tween in all cases 5 sets of 5 unique tweens (resulting in 25 unique tweens). need to animate each set in sequentially, but out simultanously. that is, "1,2,3,4,5 in" and "12345 out." The rub is that I want to be able to interrupt at any time. If this is clear, I could end up with "1,2,3 (half way) in", interrupt, and then "123.5 out" That is, 1 and 2 will finish, 3 will be half-way complete, I interrupt, and the 1, 2, and the visible half of three all tween out at the same time. When I was able to animate in and out sequentially, this was super easy because all I had to do was create one timeline and reverse it. Most important to this question, I could interrupt any time and everything looked beautiful. Half-complete still reversed seamlessly. When I was asked to switch to sequential in and simultaneous out, I was no longer able to reverse with a single timeline.reversre() call any time I wanted. For my first test, I created two timelines: sequential and simultaneous. I could easily play sequential in, then set the progress of simultaneous to 1 and reverse that timeline out. All fine, but I was no longer able to interrupt the switches. For example, half way through sequential in, the non-complete timelines would obviously jump to their ends to simultaneously reverse out. Then I wondered if I could create just the 5 sequential timelines but tell each tween to reverse individually (instead of reversing the timeline). And, I would then cleanup using progress() to make sure the timeline was at 0, etc. That is: "group1timeline.play()"; interrupt half way through the 3rd tween; "all group1 tweens reverse"; group1timeline.progress(0). But, I got some odd results. I moved on to thinking about synchronizing progress for each corresponding tween in the sequential and simultaneous timelines, but thought that too complicated. Next I thought about not using TimelineMax at all. . Put each tween of a group in an array and then play and reverse each one. That seems like it will work. How would you recommend setting up 5 sets of tweens so that I could sequentially animate each set in, but interrupt and simultaneously animate only the progress thus far, out simultaneously?
  18. Hi, I'm struggling to get a basicTweenLight example to work in FlashBuilder. Below is a photo of my code. Notice that I have the 'com' folder in the project folder. Notice the errors I'm getting. Any advice would be appreciated.
  19. Using TimelineMax and TweenMax, when doing a zero duration tween to adjust an object's visibility at a point on a timeline, the visibility is toggled immediately instead of in sequence. Example var text = some text object var img = some image object img.css('visibility','hidden') var tl = new TimelineMax() tl.to(text,3,{left:500}) tl.to(img,0,{visibility:'visible'}) tl.from(img,3,{left:500}) The image object will be visible at the start of the timeline animation, instead of after the text object animation. Although it works if you do: tl.to(img,0.001,{visibility:'visible'})
  20. mlovett

    Ease on Play

    Hello all! So I have button that plays a timeline when it's mousedown and then stops when mouse up, but I want it to ease into the play every time the button held down, so it doesn't feel so linear. I haven't really used TweenLite very much, and I have the TweenMax script in my document. So far my code looks like this: var omni = sym.getSymbol("omnibed_side"); var pos = omni.getPosition(); if (pos < '3000') { omni.play(); } else { omni.stop(); } I was thinking it'd go inside the "if" statement. Any help would be greatly appreciated! -mlovett
  21. var dial:Sprite; var radius:Number = 0; var angle:Number = 0; var angleConvert:Number = 180 / Math.PI; init(); function init():void { makeDial(); makeOrb(); } function onMove(e:MouseEvent):void { angle = Math.atan2(mouseY - dial.y, mouseX - dial.x); volumeMC.rotation = angleConvert * angle + 90; } function onOrbDown(e:MouseEvent):void { stage.addEventListener(MouseEvent.MOUSE_MOVE, onMove); stage.addEventListener(MouseEvent.MOUSE_UP, onOrbUp); } function onOrbUp(e:MouseEvent):void { stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMove); stage.removeEventListener(MouseEvent.MOUSE_UP, onOrbUp); } function makeDial():void { dial = new Sprite(); var g:Graphics = dial.graphics; g.lineStyle(2, 0x333333); g.drawCircle(0, 0, radius); dial.x = 170; dial.y = 370; addChild(dial); } function makeOrb():void { volumeMC.buttonMode = volumeMC.useHandCursor = true; volumeMC.addEventListener(MouseEvent.MOUSE_DOWN, onOrbDown); } Hi I have a volumeMC dial that drags and drops great, but I want to use the rotation snap in tweenMax to make this better. All I want it to do is .... 1] drag rotate volumeMC around its own centre from 0-360deg in 10deg intervals. 2] to trace the current rotation value to I can adjust the sound. here is what I have that works but I don't like it ... hope someone can help Steven
  22. function mouseOUT(e:MouseEvent):void{ TweenMax.to(menu_MAIN, 2, {rotation:"360", ease:Linear.easeNone, repeat:-1}); } function mouseOVER(e:MouseEvent):void{ TweenMax.killTweensOf(menu_MAIN);; } Hi guys, here is a little problem I have and cant figure out how to solve it say I have a clock hand @ 12 o'clock which rotates constantly until I MOUSE_OVER it, what I am trying to do is when I MOUSE_OVER it I want the clock hand to always stop @ 12 o'clock no mater when I MOUSE_OVER it. Thanks for your help in advance Steven
  23. Quick question. I'm trying to use TweenMax to (smoothly) tween the borderColor property of my TLFTextField from one uint to another, and have had no luck so far. I can't quite figure out where to go from here: TweenMax.to(textField, 1, borderColor: ?? }); Any help would be appreciated. Thanks in advance! Jacob
  24. Hi guys, so about a year ago i used teenmax v 1.12, and it worked fine. I updated to the latest version somehow the same code doesn't work anymore. Can someone point me to the new changes in the codes. Or maybe if my code is wrong. Thx. TweenMax.to($("#cover"), 5, {css:{alpha:0}}) The above is the code. If i replace v 1.14 to the old version, somehow it works. By the way i'm using this in adobe Air HTML.
  25. Hi, Maybe I did smthng terribly wrong, but I think I found an issue in GSAP 1.14.2. play('label1') doesn't work correctly. If I use the GSAP version: beta 1.8.2 it does. Thank you! Grtz Dennis
×