Search the Community

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

hi there~~ all I want just repeat all. but I havd no idea, how to make all items repeat at same time. gsap2timeline.html

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

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.

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.

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 !

I can not pause an animation that is executed by tweenFromTo Please help

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 ?

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.

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?

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

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.

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)

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.

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

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,

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(); }

Hi ! Hope you are fine guys, I have a problem with a timeline execution. Here is my code : this is in a click function : tl = new TimelineMax(); tl.to(".office-map", 2, {marginRight: '1800px'}, "s"); tl.to("#office-contact", 2, {left: '800px', onComplete: afterAnimation, onCompleteParams: [toSelect, currentSelected]}, "s"); tl.to(".office-map", 2, {marginRight: 0}, 'b'); tl.to("#office-contact", 2, {left: 0}, 'b'); And here the called function (afterAnimation) : function afterAnimation(toSelect, currentSelected) { currentSelected.removeClass('active'); currentSelected.hide(); toSelect.addClass('active'); toSelect.show(); } the first 2 lines of tl are made to move the objects of their position to the outside of the screen. After the function trigged, I have two other tl line in order to have them back. .office-map do properly the action (restoring margin in 2 seconds as asked) but #office-contact is coming back like a big block in 0.2s. We don't have a single transition. When I right click "inspect element" I can see the modification on the moving left element, but not on the right one... Do you have a clue about the problem ? Thank you in advance, jean ps: ofc on codepen it's working perfectly well but not in my code : http://codepen.io/anon/pen/gpvvEN So, my problem with my code is to have a move back - of the blue div - correctly displayed.

Hi, I've been playing with your cursor demo and trying to incorporate it into a TimelineMax (just to get me started as I'm new to all of this). I'm seeing some random delay though in between the cursor stopping blinking, and the text actually being typed and I can't narrow down where it's coming from as it doesn't seem to happen in the original Codepen (although there were some errors in that for some reason!) In addition to that, Chrome is getting a lot of the following messages, these happen at the same time as the delay so I've obviously got something mixed up. invalid top tween value: NaN Does anyone have any ideas as to the cause of the delay and the errors? I've forked the original Codepen, and then recreated the delay by copying my code back in http://codepen.io/padders1980/pen/YXeMYN

Hi all! Is it possible to disable animations in IE8? Basically, I've got a site with a ton of animations and in IE8 it's really struggling and the site will be much better off if I disable animations. I still need the results of the animations, just no tweening. Does that make sense? Cheers, Mike

this is my coding sample: var timeline:TimelineMax = new TimelineMax(); timeline.staggerTo([mc1,mc2,mc3],1,{onComplete:Function}, 1); i want each mc to have a different function. is it possible?

Hi there! I find there's something I'm not quite grasping using TimelineMax and fromTo, been trying all sorts of different variations, but shouldn't this work? Or am I missing something critical here? timeline = new TimelineMax(); timeline.append(TweenMax.fromTo(element, 1, {css: {left: "100", top: "100"}}, {css:{left:"130", top: "130"}} )); Appreciate all the help I can get, thanks!

When using `TimelineMax.from`, only the first object returns to the original `TimelineMax.set` value. All objects obey as I expect, when all of the `set`'s are done first, then `from`'s. I understand the timeline is doing the following respectively. I know they are different but in either demo, I expect the all of the bars to be at a `y` value of `20px` at the end. http://codepen.io/anon/pen/aOVwXv tl set from set from set from http://codepen.io/anon/pen/waPeOX tl set set set from from from

When working with TimelineMax, is it possible to use a relative position and have a label? I have tried to chain `addLabel` before and after the desired position, but it does not seem to be able to be referenced. Am I falling into some sort of anti-pattern? Here is a barebones demo: http://codepen.io/anon/pen/VLrpQX var tl = new TimelineMax(); var boxNode = $('.box'); tl .fromTo( boxNode, 8, { autoAlpha: 0 }, { autoAlpha: 1 }, 'fadeIn' ) // Start the movement alongside the fade .addLabel('moveFromTop') .to( boxNode, 1, { top: '200px' }, 'fadeIn+=0' ) //.addLabel('moveFromTop') // One second after moving from top, move from the left .to( boxNode, 1, { left: '200px' }, 'moveFromTop+=1' );

Hello, is there a possibility to manually set the position of my draggable element? I want to use it as an scrollbar that move synchronized with my timeline and it should automatically get updated when the timeline continues. Ive already added an onUpdate handler to my timeline and an onDrag handler to my draggable with all the calculations already implementet. I just dont know how I can set the position of my draggable. My Markup is the following: <nav id="drag-nav"> <div class="dragger"></div> </nav> Javascript: $dragNav = $("#drag-nav"); draggerInstance = Draggable.create(".dragger", { type: "y", bounds: $dragNav, onDrag: onDragHandler })[0];