Jump to content

Search the Community

Showing results for tags 'TimeLineMax'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • 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


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. I'm a little confused about how to return a timeline for later use. I have a number of elements that I am looping through and playing my timeline on, however, I need to return the timeline outside of this loop, so that I can call the .kill() method on it, inside of another function. So my functions looks like this: dtnavs = { runStuff: function(){ dtnavs.cellFloatyTweens(); }, killStuff: function(){ // not sure how to kill the cellFloatTL here? }, cellFloatyTweens: function(){ dtnavs.cell.each(function(){ cellFloatTL = new TimelineMax() .to(this, dtnavs.getRandomNum(8,17), {xPercent: dtnavs.getRandomNum(0.5,12.5), yPercent: dtnavs.getRandomNum(1.5,14), rotation: "'-=" + dtnavs.getRandomNum(-20,1) + "'", yoyo:true, repeat:-1, ease: Power2.easeInOut}); cellFloatTL.seek(9); //So when it starts it's already moving }); } } Is it possible to call kill on this timeline, inside another method/function? I thought I could possibly do this, but it doesn't seem to be working: dtnavs = { runStuff: function(){ dtnavs.cellFloatyTweens().play(); }, killStuff: function(){ dtnavs.cellFloatyTweens().kill(); }, cellFloatyTweens: function(){ cellFloatTL = new TimelineMax(); dtnavs.cell.each(function(){ cellFloatTL.to(this, dtnavs.getRandomNum(8,17), {xPercent: dtnavs.getRandomNum(0.5,12.5), yPercent: dtnavs.getRandomNum(1.5,14), rotation: "'-=" + dtnavs.getRandomNum(-20,1) + "'", yoyo:true, repeat:-1, ease: Power2.easeInOut}); cellFloatTL.seek(9); //So when it starts it's already moving }); return cellFloatTL; } } The above code only runs my tween on one of the dtnavs.cell elements, and I need it to loop through them all and then be able to kill the whole thing at a later time. Thanks in advance for any insight. PS: I can add a codepen if you need, but my issue is really in syntax, not with the tween it's self, so I thought that just code would be sufficient here.
  2. Hi all - this is my first post on GSAP, hope you guys can help me. Love GSAP by the way, it is awesome. I'm using Reveal EventListeners (https://github.com/hakimel/reveal.js#slide-states) to trigger timeline sequences. These sequences are a combination of staggerFrom and from, and I use DrawSVG with Yoyo sometimes too. I found this example that pretty much matches my setup: http://stackoverflow.com/questions/23936987/how-to-trigger-a-gsap-function-when-a-slide-comes-active-with-reveal-js Here is one of the sequences, they all follow the same structure: Reveal.addEventListener('slideName', function () { tl = new TimelineMax(); tl.staggerFrom("#aSlideElement", 9, { rotationY: 1080, scale: 15, y:"-1900px", x:"600px", ease: Power4.easeInOutQuint }, 0.7) .from("#anotherSlideElement", 9, { onUpdate: cssFilterTween, onUpdateParams: ["{self}", "blur", 100, 1], ease: Power4.easeInOutQuint }, 0) .from("#yetAnotherSlideElement", 10, { fill:"#0f0c31", ease: Power4.easeInOutQuint }, 5) .from("#soManySlideElements", 4, { autoAlpha: 0, ease: Power4.easeInOutQuint }, 10) }, false); Reveal is basically a presentation slides framework and each slide has its own sequence that is triggered using an eventlistener. My problem is these sequences do not completely reset the timeline and all the elements when you 'leave' a slide. This means if you go back and forth between slides, the elements are sometimes misplaced, finish in the wrong position or get muddled start/finish timings. Eventually they just slow to a halt and do nothing. I have to refresh the page to get it back to where things started. I've tried restart(), clear(), remove(), kill(), pause(0), etc. I've tried placing 'overwrite: 3' amongst each tween. I've tried placing a single global timeline above the eventlisteners, rather than create a new timeline for each slide. I think it may be something to do with the volatile triggering that occurs when quickly going back and forth between slides, but I assume GSAP should be pretty quick at resetting? Any help would be awesome, this is really puzzling me. Thanks, James
  3. This may be more of a feature request, but I'd like to be able to remove items (TimelineMax.remove()) and insert new items (TimelineMax.add()) by position. So if I have a TimelineMax that contains 5 TimelineLite animations, and I want to update the third TimelineLite assuming a zero index: TimelineMax.removebyposition(2); TimelineMax.addbyposition(myNewTimelineLite,2); Looking at the documentation I can't find a way to do this. I was just wondering if anybody here had any insight in to if this was possible or a planned feature? Thank you! Dan
  4. Pusher


    Hi all, This may not look like a gallery at the moment but i problem there is a method to my madness. Just wondering what the best way to make only the div that is being hovered over animate instead of all of them at once. Thanks, Phil
  5. Hi guys, I'm having problems implementing the onCompleteAll function within my TimelineMax animation. My code looks like below var tl = new TimelineMax(); tl .from('.text1',0.5,{opacity:0, y:'+=10'}) .to('.text1',0.5,{opacity:0},'+=3') .from('.text2',0.5,{opacity:0, y:'+=10'}) .staggerFrom('.footer',0.5, {opacity:0, y:'+=10'},0.2, addBirdEvent) function addBirdEvent(){ console.log('footer animations done') } Problems are: The stagger animation runs immediately. I'm expecting it to run after the previous animation ends. The addBirdEvent (which is my onCompleteAll function) also runs immediately. I also tried using onCompleteAll: addBirdEvent but theres an error saying 'missing ) after argument list.' What do you think is wrong with my syntax? Thanks in advance!
  6. This is just a question about capabilities. I'm animating a site that is using the bezier plugin to move 4 small circles along outside of a single larger circle. I've got the animation working fine, I was just wondering if there was a way to have the plugin recognize the coordinates based on percentages relative to the parent or if this would just be too much of a strain on the browser(i.e. would it just bog the whole deal down because it would have to recalculate the path everytime the browser resized)?
  7. Hi there, Sorry if this is a stupid question. I am trying to pause a function and only start it when an onComplete happens in TimelineMax. The function works perfectly except that when it plays it is off screen because it is firing as soon as the animation starts. <script> var tl = new TimelineMax () tl .from("#txt1", 1, {right:-280, ease:Power2.easeInOut}, "+=4") .from("#counter", 1, {right:-280, ease:Power2.easeInOut, onComplete: startCounter}) .from("#txt2", 1, {right:-280, ease:Power2.easeInOut}) .from("#logo", 1, {top:250, ease:Power2.easeInOut}) .from("#tag", 1, {right:90, autoAlpha:0, ease:Power2.easeInOut}) var distance = {counter:0}, scoreDisplay = document.getElementById("counter"); function add() { TweenMax.to(distance, 1, {counter:"+=200", roundProps:"counter", onUpdate:updateHandler}); } function updateHandler() { scoreDisplay.innerHTML = distance.counter; } add(); distance.pause() function startCounter() { distance.play() } </script> Thanks for any help, Phil
  8. Hi there, This could be a weird question but is it possible to onComplete:50%. Ideally I would like to trigger some animations when an animation is 10%, 20%, 30%, 40% complete etc. The below code is wrong but i thought i would post it as a talking point. .from("#animation", 20, {left:990, onComplete50%: stopFunction}) What is the best way to do this? Thanks, Phil
  9. hi there~~ all I want just repeat all. but I havd no idea, how to make all items repeat at same time. gsap2timeline.html
  10. I have try to embed this to my webpage but its can't work with my webpage. always change my ohter li make they Disappear index.html bootstrap.min.css styles.css
  11. AFAIK, the only way to apply an easing function to a timeline is to tween the .progress() of that timeline. It's great that this works but it would be really handy to have direct support to specify an easing function to a timeline. Not sure how involved that feature would be.
  12. I'm trying to build a system from your slider animation example. I'm getting performance problems where onUpdate keeps being called even when the timeline isn't supposed to be running. To see this most clearly, I just took your example and added a display of the timeline's progress. Move the slider anywhere except the leftmost position then let it go. The progress keeps drifting: http://codepen.io/thunderkid/pen/YyPjJW It seems that the timeScale is set to 1e-10 instead of zero. Is there a way around this? Thanks.
  13. Hi everyone, hope you are fine. I am getting better and better with scrollMagic / gsap but when I am thinking about doing something simple, it's always giving me a hard time. I choose to use ScrollMagic with GSAP because I have some sprite to use with a parallax effect. Instead of losing you with too many code lines, go straight to the point, here is my codepen demo : http://codepen.io/anon/pen/bdXqzw In this example you can see a simple square that change to position fixed with new background-color. The thing is, at the end of the scrolling scene, I want my square to go "slowly" (1seconde animation) at the left of the screen with animation. Then it has to stay "absolute" of section if you continue on scrolling down. But as you know, if you scroll back you are supposed to have your animation going back, and I am lost about it. Thank you in advance for reading my post and maybe help me !
  14. Hi Carl, I want to execute a moderately difficult timelinemax anumation. Every time I check out http://greensock.com/position-parameter I see the Visualizer. It reminds of Flash and I start getting illusions of an After Effects Timeline visualizer. Any news on this? Is it up for sale as a plugin? I would pay. I need to stop the illusions.
  15. I can not pause an animation that is executed by tweenFromTo Please help
  16. Hi, It's my first project that uses GSAP. Here you find it http://www.wremo.pl/testCase....test.html - it dont have images right now, but the main issue is how to nest it in right way? i would like to have two main timelines for this two ad's with correct function of onComplete, now it returns complete after first scene (about 2-3 seconds after start) How can I make it to have two main timelines with full duration for both ?
  17. Here I have three Timelines which I play and reverse them in appropriate cases : var firstSwipeRight = new TimelineMax({ paused: true }) .fromTo(firstChanel, 0.1, { left: 0 }, { left: offset }, "firstSwipe") .fromTo(".dot", 0.1, { right: "26px", scaleX: 1 }, { right: "147px", scaleX: 3 }, "firstSwipe") .to(".dot", 0.2, { scaleX: 1 }) .fromTo(firstChanel, 0, { visibility: "visible", display: "block" }, { visibility: "hidden", display: "none" }, "firstSwipe+=0.1") .fromTo(secondChanel, 0.1, { visibility: "hidden", display: "none" }, { visibility: "visible", display: "block" }, "nextChanel") .fromTo(secondChanel, 0.1, { left: -offset }, { left: 0 }, "nextChanel+=0.1"); var secondSwipeRight = new TimelineMax({ paused: true }) .fromTo(secondChanel, 0.1, { left: 0 }, { left: offset }, "firstSwipe") .fromTo(".dot", 0.1, { right: "145px", scaleX: 1 }, { right: "266px", scaleX: 3 }, "firstSwipe") .to(".dot", 0.2, { scaleX: 1 }) .fromTo(secondChanel, 0, { visibility: "visible", display: "block" }, { visibility: "hidden", display: "none" }, "firstSwipe+=0.1") .fromTo(thirdChanel, 0.1, { visibility: "hidden", display: "none" }, { visibility: "visible", display: "block" }, "nextChanel") .fromTo(thirdChanel, 0.1, { left: -offset }, { left: 0 }, "nextChanel+=0.1"); var directSelect = new TimelineMax({ paused: true }) .fromTo(firstChanel, 0.1, { left: 0 }, { left: offset }, "firstStep") .fromTo(firstChanel, 0, { visibility: "visible", display: "block" }, { visibility: "hidden", display: "none" }, "firstStep+=0.1") .fromTo(secondChanel, 0.1, { visibility: "hidden", display: "none" }, { visibility: "visible", display: "block" }, "secondStep") .fromTo(secondChanel, 0.1, { left: -offset }, { left: offset }, "secondStep+=0.1") .fromTo(secondChanel, 0, { visibility: "visible", display: "block" }, { visibility: "hidden", display: "none" }, "secondStep+=0.2") .fromTo(thirdChanel, 0.1, { visibility: "hidden", display: "none" }, { visibility: "visible", display: "block" }, "thirdStep") .fromTo(thirdChanel, 0.1, { left: -offset }, { left: 0 }, "thirdStep+=0.1") .fromTo(".dot", 0.1, { right: "26px", scaleX: 1 }, { right: "266px", scaleX: 3 }, "thirdStep") .to(".dot", 0.2, { scaleX: 1 }); As you can see some targets are the same in all three Timelines, I manage to use these Timelines like this: element.on("click", ".tabs", function (event) { target = event.currentTarget; i = Array.prototype.indexOf.call(target.parentNode.children, target); dotPos = $(".dot").position(); leftPos = dotPos.left; // How to prevent conflicts between my Timelines in all below cases? if (i === 0 && leftPos === 145) { firstSwipeRight.totalProgress(1).reverse();} else if (i === 0 && leftPos === 26) { directSelect.totalProgress(1).reverse();} else if (i === 1 && leftPos === 266) { firstSwipeRight.totalProgress(0).play();} else if (i === 1 && leftPos === 26) { secondSwipeRight.totalProgress(1).reverse();} else if (i === 2 && leftPos === 266) { directSelect.totalProgress(0).play();} else if (i === 2 && leftPos === 145) { secondSwipeRight.totalProgress(0).play();} }); The problem is that as I use .totalProgress() method to somehow set each Timeline head on the start or end position to play or reverse them without conflict, I still has conflicts in some properties like display and visibility for example and this conflict happens when I use first and second Timelines and then use the third or some other cases, So what could I do to prevent these conflicts in all cases ? Please Advice.
  18. Hi, I'm jumping between pages with different timelines, it's all ok, till the moment i go back to the first page (to the point it was before left) using seek function. myTimeline.seek(lastposition); where lastposition it is the position before the page was changed. I can easily check the value of that variable, lastposition, and it is right, but the seek function doesn't really jumps to that position, but a bit before, like 0.3 sec aprox, depending on how many images needs to load till that lastposition. Even forcing the lastposition to 1, the seek function do not jumps there, but a bit before. Why this is happening?
  19. I'm trying to create an interactive illustration that requires a bunch of coins to be flipped when a button is clicked. I managed to hack together something that works and builds a new timeline every click, but I can't figure out why the very last coin in the series won't animate. I'm new to GSAP and a javascript novice, so it could easily be something very simple. Any insights would be appreciated. http://codepen.io/misterjworth/pen/EjGrGL?editors=001
  20. Hello guys, I would like to suggest this simple change in TimeLineMax.addCallback signature: Current TimeLineMax.addCallback(callback, position, [args], scope) Suggestion TimeLineMax.addCallback(callback, position, scope, [args]) I know there is a reason to this current signature, but there is some situations where you don't want to set arguments, so the usage can be more simple and clean like this // Example var tmx = new TimelineMax; tmx.add(twm1) // current // tmx.addCallback(onTMXComplete, tmx.totalDuration(), null, this) // suggestion tmx.addCallback(onTMXComplete, tmx.totalDuration(), this) Look the last argument can be ignored. Of course, this same sequence, can be used for any method that needs to set scope as argument (callback, scope, args). Sorry if I made a suggestion in a wrong place. Thanks, UPDATE: I forgot to add position argument.
  21. I'm trying to get an animation to use different property values every time it plays. I've put the values into variables and everything works fine using the default values the first time, but I can't figure out how to get the animation to read the new values that are created when you click a button. var jumpHeight = 100; var jumpTime = 1; var boxcolor = "#00ff00"; var jumpBox = new TweenMax("#redbox", jumpTime, {y:(-jumpHeight), backgroundColor:boxcolor, ease: Power1.easeOut, repeat:1, yoyo:true}); //called when you click a button function rePlay(){ jumpHeight = jumpHeight+24; jumpTime = jumpTime-0.1; boxcolor = "#0000ff"; jumpBox.restart(); } Is there a simple way to do this that I'm missing? This codePen shows a simplified version of what I'm trying to do. http://codepen.io/misterjworth/pen/bdjoLv (The actual project uses multiple tweens within a TimelineMax object that all reference the same variables)
  22. I load a swf file in my application, and the swf have some tweens (TweenMax). The problem happens when I play and stop the object, like this: var swfloader:SWFLoader = SWFLoaderObject; //SWFLoaderObject is my swf loaded var tweens:Array = tweenMaxClass.getAllTweens(); for each(var tween:* in tweens) { tween.seek(0); //0 is example } swfloader.rawContent.gotoAndPlay(0); //0 is example The objects are out of sync, and can not correctly resume animations, either by stress processor or other problem.
  23. beamish

    nested timelines

    Hi, I have a problem with nested timelines which is demonstrated in the attached pen: In the codepen: click on the 1st button. It plays a child timeline nested in a parent timeline. My first problem is: why do I need line 5: 'child.play(0);'? if I comment it out then the 1st button won't work. Doesn't the parent time head control the child heads? Now click on the 2nd button. The child is removed from the parent and played by itself. This is OK. Now click on the 3rd button, which should play only the child (which has been removed from the parent after step #2). Why doesn't the child play?... Now if you click on the 2nd button again the child DOES play... why? and if you now click on the 1st button which plays only the parent - the child is playing - even though it has been removed from the parent... as if the 'remove' from the parent has not been effective. What is my wrong way of thinking here?... Thanks, Elior
  24. Does anyone know of a good example of a ScrollSpy-ish being used with ScrollMagic and GSAP ? I've been working on a little something, but it's giving me some trouble. It works, but some numbers are hard coded.. and I really think there's a better way. I'm also working on a codepen of the very basics of it.. . but in the meantime, has anyone already created this sort of thing? Thanks,
  25. Hello, in my script im using a draggable for navigation. In the throwProps-callback the draggable is disabled. Now i want to enable it in an oncomplete callback of my timeline, but itis doing nothing. I can log the draggable instance but calling the method isnt affecting anything. The draggable stays disabled. After every section in my timeline my timeline callback is called. Then I want to enable my dragger to grant navigation. OnThrowPropsComplete I want to disable the dragger and navigation to dont disturb the timeline. Draggable instanciation: draggerInstance = Draggable.create($dragger, { type: "y", bounds: "#drag-container > div", overshootTolerance: 0, throwProps: true, onThrowComplete: function() { hideSwiperButtons(); wasDragged = true; var itemNo = getDraggerItemNo(this.y); tl.seek(sceneLabels[itemNo]); $dragger.removeClass("active"); $menuItems.removeClass("active"); $menuItems.eq(itemNo).addClass("active"); TweenMax.to($menuContainer, 0.5, { opacity: 0, delay: 0.01, ease: Expo.easeOut, onComplete: function() { $menuContainer.removeClass("active"); currentTween = tl.tweenTo(sceneLabels[itemNo + 1]); currentScreen = itemNo + 1; } }); this.disable(); //Disable dragger here to prevent navigation while tweening }, snap: { y: function(endValue) { return getDraggerItemNo(endValue) * gridHeight; } }, maxDuration: 1, onDragStart: function() { $dragger.addClass("active"); $menuContainer.addClass("active"); TweenMax.to($menuContainer, 0.5, { opacity: 1, ease: Expo.easeOut }); }, onDrag: function() { var itemNo = getDraggerItemNo(this.y); $menuItems.removeClass("active"); $menuItems.eq(itemNo).addClass("active") } }); TimeLine onComplete callback function onCompleteTimeline() { //draggerInstance is accessable from here draggerInstance[0].enable(); //not working tl.pause(); }