Search the Community
Showing results for tags 'timeScale'.
-
When I hover off (mouseleave) I want to speed up the reverse of the animation timeline. the .timeScale(2) isn't working for me.
-
Hi there, I'm trying to speed rotation animation on scroll with use of ScrollTrigger. It works pretty well except when I do a fast scroll the rotation gets crazy and I don't really know how to limit the speed... Maybe I do it all wrong, I tried to clamp value but any ideas on how to limit that correctly? Thanks for your help ! Alex
- 1 reply
-
- gsap
- scrolltriger
-
(and 3 more)
Tagged with:
-
I've recently found a very nice codepen containing almost the exact same animation I wanted done in GSAP, and I've been trying to convert it to GSAP 3 to use it in a web app using pretty much just react hooks all over. It uses timeScale tweening to simulate acceleration and deceleration of a rotating svg, with a play/pause button. However, I can't seem to get the acceleration/deceleration effect to work on Firefox/Chrome, and it won't pause, either. The codepen I linked is the effect I'm trying to achieve, and I've linked a minimal reproducible example below: https://codesandbox.io/s/blissful-hill-boo2n There is just one condition that I'd like to include for my app besides using hooks and gsap 3, and that is that I need to fade the rotation in and out based on the state of the parent element, and as far as I can see that's working alright (as evidenced by the isActive! isNotActive! console logs). That state is currently set by the playButton element, via the setActiveCallback function. I'm not sure this is what's breaking everything, since the animation itself doesn't look like it's working properly on it's own with either react hooks or gsap 3. TL;DR: I can't get codesandbox the animation to pause, and the intended acceleration/deceleration effect is borked. Any help will be very much appreciated!
-
Hi I have to develop this animation where an image starts from scale:0 and opacity:0 then grows rotating with an easing power2.out then keeps it rotating infinite by linear easing. Some ideas? Thanks
-
I'm curious how I can create a delay that is not affected by the timeScale property. For instance, I'd like a variable that changes the overall speed of each animation, but not the amount of time that it pauses for. In my example, the timeSpeed constant could go from .5 to 3. Is there an easy way to tell timeScale to ignore delays? const timeSpeed = .5; const pauseTime = 1; const tl = new TimelineMax({repeat: -1}); tl.timeScale( timeSpeed ); tl.to("div", .5, {x: "+=100", y: "+=100"}) .to("div", .5, {x: "-=200", delay: pauseTime}) .to("div", .5, {x: "+=100", y: "-=100", delay: pauseTime}) .to("div", 0, {delay: pauseTime}) ;
-
Hello again, I'm back with another issue I'm facing. I am aiming to have a background that moves to give the impression of the sprite movement (essentially moving the viewport but not). To achieve this I have made repeating Tweens which move from one side of the page to the other and put them into timelines for X and Y. To get a feeling of speed I have been messing with the TimelineMax timeScale. The issue I have found is that going up (-ve timeScale) soon results in the timeline reaching progess = 0. This is likely to be an issue travelling left also. I have had a look at a similar topic here: however this has not worked well for me. I believe this is because I am not calling reverse(), rather I'm using negative timeScale. Does anyone know a fix for this that will work well, and is there a better way I should be doing this which would make it easier to repeat etc..? Thanks for your help Jareth
-
I have a constant rotation, repeat: -1 I want to make the rotation faster, so I tween the ._timeScale. Please shed some light on these (atleast to me) unexpected behaviours 1) Tweening _timeScale results in a playback?! 2) What is ._timeScale, anyway? Tweening rotate.timeScale() only works with "generic object+ onUpdate"-approach. Tweening _timeScale allows the convenience to tween the tween itself, right
-
Is it possible to add timeScale when playing a timeline with this method:? timeline.reverse() I'm running play timeline within a 'if scroll is this' loop and would like to reverse the timeline with faster speed on the 'else' statement like this: if (scrollTop < 64) { timeline.play(); } else { timeline.reverse(); } Thanks for your time. Yan
-
Trying to start my animation slow and then speed up gradually. I read there is way to animate timescale, but am not sure how. Does https://greensock.com/customeasework for JS? If so is there an example of implementation? Thanks.
-
This is almost certainly a bug in my code, but I'm moving some elements forward in z-space (that is low to high z) using TweenMax's in a TimelineMax // pseudo code TLM:TimelineMax = new TimelineMax; for (var i:int = 0; i< someNumber; i++) { var tw:TweenMax = new TweenMax(anAsset,TWEEN_TIME,{onUpdate:doUpdate,onUpdateParams:["{self}"],z:someFinalZ}); TLM.add(tw,TWEEN_Time/i); } private function doUpdate($tw:TweenMax):void { sortElementsOnZPosition(); // sort all the elements display position based on z, using addChild() if (something) { $tw.timeScale(0.5); // slow down } else { $tw.timeScale(1); // set back to normal } } Sometimes I want to slow down the tweened elements' z-motion (and in a separate call I'm moving them on x axis), but when I want to set the tween back to normal speed, they suddenly jump forward in z-space, as if they were suddenly set back to where they'd been if they'd never been slowed. There's a lot going on behind the scenes, including addChild()-ing the elements (based on a z-sort), etc. Surely something in my code, but the tweens are pretty separate from everything else, so I'm wondering if there's something related to timeScale of Tweens in a Timeline that I'm missing. Thanks!
-
I was curious if there is a way to "overwrite" the globalTimeScale with the one assigned to a given TweenMax instance. For example: - I set the entire playback to slow-motion by setting globalTimeScale( 0.25 ); - Then, whenever I shoot enemies, I want to delay the SFX call with TweenMax.delayedCall in realtime timeScale, so I use: TweenMax.delayedCall( pTime, playSFX, [pSoundClass, pLoop]).timeScale(1); But this still animates according to the globalTimeScale (I'm assuming it does timeScale x globalTimeScale = 1 x 0.25 = 0.25). This DOES seem like the correct typical behavior (one timeline governing them all), but is there a way to overwrite this behavior? The only way I could get around it was by dividing 1 / TweenMax.globalTimeScale(), which gives the "inverted" time-scale value for the delay to catch-up to realtime durations. Is there any other approach to overwrite the timeScale of a given TweenMax instance? A boolean or a binary flag?
- 12 replies
-
- overwrite
- globalTimeScale
-
(and 2 more)
Tagged with:
-
Hi there, for a mobile car game i use Starling and TweenMax for all animations. Since i would like to show a realistic driving behaviour the cars should also be able to brake and accelerate when obstacles occur or vanish. I thought about changing the timeScale property of the car's tween that needs to brake (from 1 to 0) or accelerate again (from 0 to 1) with another Tween. First tests show me that the animated cars with a changed timeScale property do not drive that fluent anymore as with a value of 1.0. What do you think, is this a good and performant approach to implement that behaviour or would there be better options ? Thanks for your opinions. Best regards valley