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. David An

    Big Memory Leak

    TweenLite.to(cloud_wrapper.find('.kr-line-timer'), openedSkyDurRemaining / 1000, { css: { width : cloud_wrapper.width() }, ease: Linear.easeNone, onComplete: function() { cloud_wrapper.find('.kr-line-timer').css('width', 0); } } ); The code above has big memory leak and memory is increasing by 1.5G for 5~6 hours and finally chrome crashes. If I remove this code, the memory leak issue is gone. cloud_wrapper has some elements has event listeners defined using jquery like following: cloud_wrapper.find('.kr-nav-arrow').on('click', function() { ... }); But it's not the object (kr-line-timer) used for TweenLite. Some people says I should remove listeners to fix memory leak issue. But If yes, when can I add the listeners again to accomplish my logic? If not, how can I fix this issue?
  2. Hi, I am trying to animate two div in the same ScrollScene simultaneously but only once has animation, the second is not animated. I just made a fiddle for this problem, I have other ScrollScene before and after. Codepen URL: http://codepen.io/dhenriet/pen/qtsgi
  3. GreenSock

    TweenMax

    Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. TweenMax is the most feature-packed (and popular) animation tool in the GSAP arsenal. For convenience and loading efficiency, it includes TweenLite, TimelineLite, TimelineMax, CSSPlugin, AttrPlugin, RoundPropsPlugin, BezierPlugin, and EasePack (all in one file). See the Pen GSAP Overview by GreenSock (@GreenSock) on CodePen. Quick links Getting started What's so special about GSAP? Full documentation Showcase (examples) Since TweenMax extends TweenLite, it can do ANYTHING TweenLite can do plus more. You can mix and match TweenLite and TweenMax in your project as you please. Like TweenLite, a TweenMax instance handles tweening one or more properties of any object (or array of objects) over time. TweenMax's unique special properties TweenMax's syntax is identical to TweenLite's. Notice how the TweenMax tween below uses the special properties: repeat, repeatDelay, yoyo and the onRepeat event callback. //basic illustration of TweenMax's repeat, repeatDelay, yoyo and onRepeat var box = document.getElementById("greenBox"), count = 0, tween; tween = TweenMax.to(box, 2, {left:"740px", repeat:10, yoyo:true, onRepeat:onRepeat, repeatDelay:0.5, ease:Linear.easeNone}); function onRepeat() { count++; box.innerHTML = count; TweenLite.set(box, {backgroundColor:"hsl(" + Math.random() * 255 + ", 90%, 60%)"}); } See the Pen TweenMax basic repeat and onRepeat by GreenSock (@GreenSock) on CodePen. Staggered animations TweenMax makes it easy to create staggered animations on multiple objects. The animations can overlap, run in direct sequence or have gaps between their start times. TweenMax's three stagger methods: TweenMax.staggerTo(), TweenMax.staggerFrom() and TweenMax.staggerFromTo() are literal one-line wonders. See the Pen TweenMax.staggerTo() by GreenSock (@GreenSock) on CodePen. Additional Methods TweenMax inherits a ton of methods from TweenLite and has quite a few of its own. ul.chart {width:300px; float:left; margin-right:80px; } ul.chart li:nth-child(1){ font-weight:bold; list-style:none; margin-left:-20px; font-size:20px; margin-bottom:20px; } TweenLite and TweenMax Methods delay() delayedCall() duration() eventCallback from() fromTo() getTweensOf() invalidate() isActive() kill() killDelayedCallsTo() killTweensOf() pause() paused() play() progress() restart() resume() reverse() reversed() seek() set() startTime() time() timeScale() to() totalDuration() totalProgress() totalTime() Methods exclusive to TweenMax getAllTweens() isTweening() killAll() killChildTweensOf() pauseAll() repeat() repeatDelay() resumeAll() staggerFrom() staggerFromTo() staggerTo() updateTo() yoyo() Learn more in the TweenMax documentation.
  4. Hi All, I've recently seen a javascript animation created on codepen: http://codepen.io/GreenSock/pen/bkLwt Problem is it doesn't work. I've tried creating it on codepen and locally on my pc. But it doesn't work. Are these features still available?
  5. Hi MovieA.swf (contains no greensock classes at all) MovieB.swf (uses TweenMax) When i load MovieB.swf (online) from MovieA.swf (local) i get some warnings in the FlashEditor output. ( 3 x "MovieB.swf tried to access incompatible context "MovieA.swf") Using System.security.allowDomain("*") does not solve or affect the problem at all. Everything works as expected, i just wish to get rid of the warnings. I'm trying to streamline a small banner production framework for others/colleagues to use, and i'd rather have a "warning-free" setup =)
  6. I'd like to understand the best way to do those 'hiding and showing" elements that are not in the HTML flow — for instance, the sort of thing where you slick on a form element and more choices appear underneath. I believe, from looking at the forums, that if you have an element that is hidden, and not in the flow, you set visibility:none,opacity:0 and then TweenMax.to(element, time {autoAlpha:1, visibility:block}) — but will this "slide" the element into place, that is both make it tween opacity as well as tween the other elements to make room? If not, what's the best way to achieve this? How does one make it hide again? Perhaps I'm not on the right track, but it's an ubiquitous internet visual technique, so I'm open for best practices how to achieve. Or perhaps one should simply keep the place occupied, have visible:hidden? — but then there are a lot of blank spaces, no? Any help appreciated, sorry if at all vague.
  7. I've been playing around with TweenMax, using Scroll Magic JS plugin, and have yet to find a working example of an animation, where the element that will be animated, has initial CSS that is absolutely positioned to the right and bottom, come in from the right of the screen. CSS wise, I only see animations that use x (left) and y (top) coordinates. Is it possible to get an animation to come in from the right side of the screen? If so, can someone please point me to an example.
  8. So i'm currently working on a page that has animation when you scroll down the page using scrollmagic and tweenmax. I've pinned the appropriate sections and created the animation, and everything works perfectly. I then added some javascript to have a show/hide function for the different features in a sticky nav (instead of having a long vertical scrolling page, it swaps out content within the same area). I noticed a very weird bug when I switch between the different sections. Here's a screenshot of what the bug looks like when I go back to the original section with the animation. It seems as though the tweenmax plugin is ignoring all of my css and completely breaks. What's even weirder is that when you start to scroll down the css is restored. Any ideas on what this is? I can't seem to figure out what's causing it.
  9. I'm using GSAP's TweenMax to scale a div when a user clicks on a button. However, what I want to do is be able to get the current scale value and/or know how to increment the scale value by say 0.5. This is how I'm setting the scale when the button is click: TweenMax.to(mapContainer, 0.4, { scale: 1.3}); So scaled to 1.3 over 0.4 seconds. So what I'm wanting to do is when a user clicks on that button again, it will scale it by an extra 0.5 each time. I've also asked this on SO as well if you'd like to asnwer on there as well for the benefit of anyone looking aorund: http://stackoverflow.com/questions/24181307/how-to-get-scale-value-using-greensock-animation-platform-gsap Thanks!
  10. Klas

    TweenMax updateTo

    Hi, First off, thanks for a great library. I've been trying to change a tween on the fly, specifically the x value for a DOM element. For some reason the updateTo method doesn't seem to work. Maybe because x is converted to a css value it is considered a plugin-value when used on dom elements? I've created this pen to illustrate the issue: http://codepen.io/klas/pen/eduhJ If you click the {x: 10} button before you play the animation the tween updates as expected. Any subsequent calls to updateTo after the animation has been played or scrubbed does nothing. The js docs suggests using the DynamicPropsPlugin but as far as I understand it is only available for AS. Not sure it's on the roadmap for js but I can definitely see a use case for it in responsive design. Cheers Klas
  11. Hi, thank you team greensock for the terrific work you're doing! I'm a big fan of your engine and your support! In my project I'd like to go forth and back on the timeline of a movieclip (which has a bitmap on each frame) while scrolling with my mouse wheel. For that I am creating a frames-based tweenMax and adding it to an also frames-based timelineMax. Then I am using the "tweenTo" method to go forwards or backwards on the timelineMax according to the values I create while scrolling. Tweening forwards seems to work, but it wouldn't tween back when the value decreases again. I attached a demo file with a simple rectangle moving to the side, instead of the bitmaps, on each frame. As you might have noticed I am quite new to actionscript, so I am really happy if anyone would like to give me a hint. Greetings from Germany elsa DEMO.zip
  12. Hi, I have multiple small timelines added into a main timeline. And main timeline is controlled by a slider control and play pause buttons. The small timelines can be a text animation with a read time wait, or an image animation. This is my set up for text + image animation screen. I want to add a timeline to main timeline of an animation which keeps on repeating itself for the wait read time of a text animation timeline. Is there anyway to repeat an animation or play an animation in a loop for X amount of time (in seconds)? Thanx.
  13. I am using TweenMax to shoot to a certain point of the page like so: TweenMax.set(map.win, { scrollTo : { y: val } }); This goes to the wrong position but works properly elsewhere in my code strangely... for now I am doing this instead and works properly, but feels like a gimmick: TweenMax.to(map.win, 0.000001, { scrollTo : { y: val } }); Any help would be appreciated!
  14. Hi I love GreenSock tools, they're a first class complement to HTML5. I've just renewed my subscription and am in the process of understanding how TweenMax works with RequireJS. Through perseverance I've got TweenMax working, but I'm a bit unsure if my workflow is correct. I've read various posts that seem to confuse my understanding, perhaps as they may be out of date. It would be great if Greensock or community could post an up-to-date tutorial on how TweenMax and it's Plugins work with RequireJS and some clear examples. What I find confusing is based on various areas (and the following questions are based from other posts on sites/forums perhaps now out of date). So with TweenMax v 1.11.6 and RequireJS v 2.1.11 (latest downloads at the time of writing): Do we still need a GreensockAMDPath? Why define window.GreenSockGlobals? (Is this best practice with RequireJS). My understanding of RequireJS is that we benefit from avoiding the global namespace. Are we still expected to use a 'shim' in the RequireJS config object to get TweenMax working? How are TweenMax plug-ins added with RequireJS. Is the latest TweenMax AMD? I have a feeling that there could be quite a few others asking similar questions. If anyone in the GreenSock community can help then I (and am sure others) look forward to reading your posts. Many thanks in advance for any help / examples...
  15. I am using TweenMax with Adobe Edge Animate, and I am trying to rotate a div to zero degrees from various starting points. If I set rotation equal to any positive or negative number, the div will rotate to that value. However, if I set rotation equal to 0, the div will not rotate at all. Is there a secret to this that I am missing? Here is a sample where photo1 is the div. It is a photo that is on the screen and initially at a -24deg rotation. I want it to move to the coordinates listed while rotating to 0deg. TweenMax.to(photo1, 1, {top:215, left:240, rotation:0, ease:Power1.easeInOut}); Any suggestions will be greatly appreciated. Thanks! Fred
  16. Hi, I am facing a problem with controling the frames with audio in its timeline using TweenMax. Frames are playing perfectly but audio is not playing. If i try to play the swf normally using swf.play(); it works fine. Any clue why it might be happening??
  17. Hi there. This question isn't limited to Greensock but was hoping I could get a little help here. I have an image scroller that basically uses buttons to relatively position a movieclip containing a horizontal line of images. There is a mask over an area so that when you click a left or right arrow, it relatively positions the movieclip under the mask and reveals a section of the movieclip. I have this working fine, however the one functionality I'd like to add, is when the left or right border of the movieclip is reached, the appropriate button is disabled so that the movieclip isn't positioned outside of the mask. Or it loops back to the starting x position. Here is the code: import flash.display.MovieClip; import flash.events.MouseEvent; import com.greensock.*; import com.greensock.easing.*; function init():void { TweenLite.to(products_mc, 1, {x:696, alpha:1}); } init(); function productsLeft(events:MouseEvent):void { TweenLite.to(products_mc, .75, {x:"-255"}); } function productsRight(events:MouseEvent):void { TweenLite.to(products_mc, .75, {x:"255"}); } arrowL_btn.buttonMode = true; arrowL_btn.addEventListener(MouseEvent.CLICK, productsLeft); arrowR_btn.buttonMode = true; arrowR_btn.addEventListener(MouseEvent.CLICK, productsRight); if (products_mc.x == 696) { arrowR_btn.visible = false; arrowR_btn.buttonMode = false; } if (products_mc.x == -1086) { arrowL_btn.visible = false; arrowL_btn.buttonMode = false; } /* buttons */ arrowL_btn.doubleClickEnabled = true; arrowR_btn.doubleClickEnabled = true; arrowL_btn.addEventListener(MouseEvent.DOUBLE_CLICK, doubleClickHandler, false); arrowR_btn.addEventListener(MouseEvent.DOUBLE_CLICK, doubleClickHandler, false); function doubleClickHandler(evt:MouseEvent):void { evt.stopPropagation(); }
  18. Hi there. This is a straight forward question. What is the best technique for coding a replay button in Greensock AS3? Would TimelineMax be best? Could I see an example? Thanks in advance for any assistance.
  19. Hello.. Is anyone else seeing this error in the console.. when trying to declare a new instance of TimelineMax() from the Tweenmax 1.11.5 CDN?? I see this happening, just for a simple tween test: http://codepen.io/jonathan/pen/eankc/ I get the following error in codepen and even locally for some reason: TypeError: this is undefined https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TweenMax.min.js Line 16 Thanks in advance to any who reply back **UPDATE** Its so weird.. now like 1 hour later and i don't see the error anymore, but the animation runs now... so weird ! I guess something was going on with the CDN... i guess whatever it was, its working again.. codepen might have been the issue too .. sorry
  20. Hi there, i'm trying to do a basic animation for a button and it's not working when i put my code on my website. Here's the CodePen page(it works here): http://codepen.io/anon/pen/KnfLk When i drop that code in my website i get this: Nothing happens basically, and even the console.info doesn't work.
  21. Tweens offers many events to detect actions: onStart, onComplete, onReverseComplete... But there's no onReverseStart How would you detect the animation started in reverse?
  22. Hi, i have a foot illustration and basically i want to click and drag foot object it's drags according to my movieclip point's x and y values. But when foot movieclip instructor animation played then i click the foot object it's position broken. I know i didn't explain clearly. Sorry my english. Here is below my source files. When you can see swf i hope you will understand, what i am trying to say. source file : https://dl.dropboxusercontent.com/u/54591390/shoot_cursor.fla
  23. I am trying to write a function that plays an animation when a link is clicked and then opens the link... so that I can play transitional animations between pages... This is my code, but I can't get the page to load after the animation: var tweenBtn = document.getElementById("one"); tweenBtn.onclick = function(event) { event.preventDefault(); tl.reverse(2.2); window.location.href = "POWERservices.html"; }; Is there a way I can add onComplete to my timeline that has just played in reverse? Or is there a better way of doing this?
  24. What's a better way to make a sequence like this shown here, but utilizing timelinemax? TweenMax.to("lens_flare1", .25, {alpha:1, scaleX:1.2, scaleY:1.2, repeat:3, repeatDelay:1, delay:1}); TweenMax.to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1, repeat:3, repeatDelay:1.25, delay:1.25}); TweenMax.to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3, repeat:3, repeatDelay:1.1, delay:1.1}); TweenMax.to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1, repeat:3, repeatDelay:1.35, delay:1.35}); TweenMax.to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2, repeat:3, repeatDelay:1, delay:1}); TweenMax.to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1, repeat:3, repeatDelay:1.25, delay:1.25}); TweenMax.to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4, repeat:3, repeatDelay:1.2, delay:1.2}); TweenMax.to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1, repeat:3, repeatDelay:1.37, delay:1.37}); After this series completes further animation will resume'.
  25. So I was trying to find a nice way to make a lot of automatic tweens (for lack of a better term) and I found the bubble example from snorkl (http://www.snorkl.tv/2010/12/timelinemax-bubbles-play-pause-and-rewind-particle-systems/) I used his code and modified it to better fit my needs (took out a lot of the randomness and the buttons) but now the clips won't tween. They are placed on the screen, but don't move at all. Also, I already had my own randomRange function defined elsewhere in my project. Heres the code: import com.greensock.*; import com.greensock.easing.*; var tl:TimelineMax=new TimelineMax({paused:true,onComplete:done}); function createWords() { //create a word (attach symbol in library with Class Bubble) and position on stage var word:words = new words(); word.y=500; word.x=randomRange(100,400); word.alpha=1; addChild(word); //create timeline for each word var nestedTl:TimelineMax = new TimelineMax(); nestedTl.insert(TweenMax.to(word,17, {y:-50, ease:Linear.easeNone})); //append new timeline very close to when the previous one started //don't even ask about the offset...k? tl.append(nestedTl, 6); } function done() { trace("the party's over"); } function init() { for (var count:Number = 0; count<50; count++) { createWords(); } } init(); WordTest.fla.zip
×