Search the Community

Hi ? I'm using one long timeline for various React states, and the plan is to tween quickly to the correct label when my state changes. The problem is I can't figure out how to set a static duration (say, 0.5) for the tween in GSAP 3. Is there a way to do this? Also, I'd like the tween to ignore pauses I've added between each state (w/ tl.addPause()). Is this the expected behavior? Thanks!

Hi Friends, I'm trying to scrub to different labels in my timeline using `tweenTo` and I want the time to tween there to be 1s no matter where in the timeline I start from. Is there any way to set a time duration on a `.tweenTo`?

Hello all, I have a slight problem and any help would be greatly appreciated, I am an animator new to the world of code and greensock. I'm looking to build something similar to the visions section on this waaark site: http://waaark.com/vision/ As you can see from the code pen I have built the outer circle forming and have built a timeline with a slider to controll the progess of the outer circle. I have managed to link each point so that when it is clicked the timeline go to the corrrect progress. http://codepen.io/Ryan84/pen/rWLNLN ideally I would Like this to tween to the correct progress and not jump as it is currently downing. I've tried a tweenTo() put cant seem to get this to function. The box2Timeline also should not animate the full way through as it currently does but function like waaark once this is fixed I'm going to also add a scroll function and then a inner icon to animate on when the corresponding point is clicked. Any help would be greatly appreciated. Kind regards, Ryan

Is it possible to use tweenTo on a TimelineMax instance to loop forwards until it hits a specified time? So calling tweenTo(2) while the the playhead is at 5 seconds on a 10 second animation would first play to the end before looping back around and stopping at the specified . I did come across this but it talks about the old flash version and frames: http://greensock.com/forums/topic/2407-tween-frames-forward-only/ Any point in the right direction appreciated. I'll try and look into writing a plugin for it.

Hi! I am a big fan of the tweenFromTo and tweenTo function of TimelineMax. However, these functions always return a TweenLite instance. Is it in any way possible to make that a TweenMax? I would very much like to have access to repeat and yoyo properties, for example. In other words, something like this would be cool: myTimeline.tweenFromTo ( 'nowhere', 'somewhere', { repeat:-1, yoyo:true } ); (Or, maybe I'm missing something and this is already possible?) myTimeline.tweenFromTo ( 'nowhere', 'somewhere', { repeat:-1, yoyo:true } );

I am trying to use tweenTo to skip panels if user clicks on it, but when i use oncomplete: resume , it goes back to panel where it was clicked rather than continuing. I apologize as I could not make a codepen. $(document).on("click", "h1", function(e) { var label = $(this).attr("panel"); e.preventDefault(); var t=timeline.getLabelTime(label); timeline.tweenTo(t,{onComplete:resume, onCompleteParams:[], ease:Strong.easeOut}); function resume() { timeline.resume(label); //it does not resume from label or time t } });

Hi, I've created a timeline and tweento buttons that are working as I have hoped. What I also need to happen isa scroll to trigger the same as the click function. For example the following tweens to the label slide2, I'd like an initial scroll down to also tween to that label. $("#two2").click(function(){ tl1.tweenTo('slide2'); }); Any pointers much appreciated. Thanks!

Hi, I've a problem with the method tweenTo after button click, when animation was complete and I try to scroll the animation starts from beginning. How can I fix it? There's another method that set also window scroll position? Sorry for my bad english. Thanks!

I wonder how to skip resp. merge tweenTo() event when triggered multiple times. Let me give an example first of all to illustrate my purpose: http://jsfiddle.net/vvweosts/1/ For now every single animation finalizes seperate each time when the button is triggered multiple times before given tweenmax is complete. But i would like to some kind of merge all triggered tweenTo() to one single animation. One tweenMax has a duration of 2sec that scale for 0.1. When i trigger the button 4 times immediately consecutively i would like the animation to end at scale(0.4) with a duration of about 2sec. Thank you in advance

In this demo, am I missing something that prevents tweenTo from working when seek works just fine? I'm sure I'm just totally overlooking something simple... Thanks!

import com.greensock.*; import com.greensock.easing.*; TweenLite.defaultEase = Linear.easeNone; var tl:TimelineMax = new TimelineMax(); tl.add( TweenMax.to(mc1,2, {x:"500"}),0.5 ); tl.add( TweenMax.to(mc2,2, {x:"500"}),1 ); tl.add( TweenMax.to(mc3,2, {x:"500"}),1.5 ); tl.add( TweenMax.to(mc4,2, {x:"500"}),2 ); tl.add( TweenMax.to(mc5,2, {x:"500"}),2.5 ); stage.addEventListener(MouseEvent.CLICK,Rewind); function Rewind(e:MouseEvent) { tl.tweenTo(0); } Hi, I'm trying to tween a TimeLine to a certain time in the timeline (0, in this case). Is it possible to control how quickly this it tweened to? even adding easing? Something like tl.tweenTo(0,2,{ease:Sine.easeInOut}); Thanks, Darren

I like to set pause on my timeline to help debug certain state. `timeline.addPause(1.3)` The issue is when I use `timeline.tweenTo(1.5)`, it skips the pauses.

Hi, I'm tweening a timeline to a label but there doesn't seem to be any way of controlling the duration myTimeline.tweenTo("zoom1"); I want something like this, 3 seconds TweenMax.to(myTimeline, 3 ,{tweenTo:"zoom1"}) Is it possible?

What I'm after is playing the TimelineMax from the current position to another time/label. I figured the tweenTo() method is exactly what I want. But for some reason it's not moving the timelines playhead and blocks other timeline-functions. What I'm creating A parallax scroller with some deph layers. A timeline contains the full range of x-positions for all layers, so if I change the position of the timeline-playhead the parallaxscroller scrolls (each layer on it's own range/depth). If the playhead is at position 0 the scroller is at full left. If the playhead is at position [duration] the scroller is at full right of the horizontal axis. Then I bind the playhead-position to the mouseover of a HTML5 canvas (using EaselJS), so that the mouseposition controls the scroller. This is what I have First I declare a paused timeline with the full range for the scroller: var tlParallax = new TimelineMax({paused:true}); tlParallax .fromTo(sky, duration, { x:0, ease:Sine.easeIn }, { x: -240 * 0.05, ease:Sine.easeOut }, 0) .fromTo(moon, duration, { x:0, ease:Sine.easeIn }, { x: -240 * 0.1, ease:Sine.easeOut }, 0) .fromTo(housesBack, duration, { x:0, ease:Sine.easeIn }, { x:-240 * 0.4, ease:Sine.easeOut }, 0) .fromTo(housesFront, duration, { x:0, ease:Sine.easeIn }, { x:-240 * 0.6, ease:Sine.easeOut }, 0) .fromTo(street, duration, { x:0, ease:Sine.easeIn }, { x:-240 * 1.0, ease:Sine.easeOut }, 0) .addLabel('treeInView', 10); In the canvas mouseover event (using easelJS) I put: function onStageMouseMove(event) { tlParallax.seek(event.stageX); } ...so the timeline then seeks the right time in the timeline, wich sets the right positions for each parallax-layer. To have one part scroll into view, no matter where the parallax scroller is, I have a button with the following code underneath the canvas: tlParallax.tweenTo('treeInView'); The problem The parallax scroll is working fine and seeks on mouseover. But once the button with the tweenTo is clicked the timeline fully stops working and doesn't tween to the wanted position. What about that? What I've tried: * When I replace 'tweenTo' with 'seek' it's working fine, but then I'm missing the smooth tween I'm after. * There cannot be a conflict between the seek() function inside the mouseOver event and the clickfunction of the button, because the button is outside the canvas and the mouseover only triggers inside the canvas. * Both tweenTo a label as tweenTo a position have the same result * I tried putting the timeline on paused: false, but it didn't help * I also replaced seek() with gotoAndStop(), without any luck - Am I missing something here? For customers sake I can't place the code here, sorry. Hopefully somebody can still give me some advise. Thanks!

I'm using superscrollorama and am having a hard time trying to understand how to use TimeLineMax properly with it. I need to be able to scroll to a specfic point in the timeline, but tweenTo() isn't animating. I have a superscrolloama object which has a pinned TimeLineMax object. Is there anyway I can tween to a label, or get the scroll.y position of an element or label. I'm out of ideas.