en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en en en en en en en en nl en en en en en en en fa en en fr hbs_lat en en en es en en en ms en en en en en en en en en en en en en fi en en en en en en en en en en en en en en de en en en en en en en en en en en ca en en en en en en en en en ca en en en en en en en en en en en en en en en en en en en ca en en en en en en en en en en tr en en en en en en en en en nl en en es fr en en en en en en en fr en en en en en en en si nb en en si en nl nl en en en en nl en en en en en en en nb en en en mn en en nl en en en en en nl en en en en en en fr nb en en fr nl nl en en en en en nl fr en en en en en fr nl nb en fr nl en en en en en en nl it nb en nl it en en en en en en en en nl nb en en nl en en en en en en en en nl nl en en en en nl en nb en nl en en nl en en en en en nl nb en en nl fi nl en en en en nl en en en en en en nl en en en en en ca nl nb en ca nl en en en en en pt en en en it en nl en de en en en eu en de en de en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
elegantseagulls posted a topic in GSAP
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`?
Tween to and from progress of a timeline upon click and scroll function
RyanHerbert posted a topic in GSAP
Using tweenTo() to loop forwards only
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 } );
Trouble while resuming after tweenTo function
meettrivedi posted a topic in GSAP
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 } });
Trigger TweenTo on Scroll
Amanda posted a topic in GSAP
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!
How to tween to a label on click and start scroll animation from there
martinmilizia posted a topic in GSAP
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!
campari posted a topic in GSAP
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 separate 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
seek vs tweenTo in TimelineMax
smakinson posted a topic in GSAP
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!
friendlygiraffe posted a topic in GSAP (Flash)
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
Timeline tweenTo ignore pause
SBoudrias posted a topic in GSAP
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.
friendlygiraffe posted a topic in GSAP (Flash)
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?
why doesn't tweenTo work in my code?
Friebel posted a topic in GSAP
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!
Get a label's position in pixels?
sailorob posted a topic in GSAP
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 specific 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.
“Massive shoutout to GreenSock for having an amazing product with fantastic documentation, hugely talented support staff and an active and helpful community. If you do anything with web animation you should *definitely* be using them.”
“GSAP and CSS Transitions: I've done both, and its like comparing an F16 to a horse. Take like 10 minutes to try.”
“I was astonished by the speed and versatility of animating with GSAP.”
“This is why I have absolutely no issues with paying for a subscription to GSAP, great product and awesome forum!”
“This stuff is so incredibly amazing I can't believe it. The level of details and options put into these things and the natural instinct GreenSock has for solving everyday problems is impressive.”
“This is by far the fastest and most active community I've ever seen for getting personalized answers to questions. Only with the help of GSAP and this forum was I able to accomplish my project.”
“Sincerely, the people behind GSAP are sorcerers”
“I've never worked with a product that has such fantastic and enthusiastic support. GreenSock is incredible in its own right, but the team behind it is really what makes it shine.”
“There is no doubt that GreenSock is currently the best available tool for creating astonishing interactive websites and animation effects.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.