Search the Community
Showing results for tags 'restart'.
Found 20 results
-
Hi there! I have a question about how timelines are managed in GSAP 3. While a timeline's animation is running, in the js console I seem to be able to use: gsap.globalTimeline.restart(); If the animation has finished it ignores the restart completely. I can only get it to restart if call it while it's running. The project is a game, this is a particular scene, where I will need to restart the timeline and set a different player (between 1 and 4). Also as we're looking to use VUE.js as a single page application I expect will need a master timeline per scene. It's a
-
Hi. I am new to GSAP and before getting into my query let me first congratulate you guys for such an amazing library and well written documentation! Despite this, I am having some difficulties whenever I try to restart a timeline containing a Splittext tween as seeing in the codepen url. On the first pass (play button), Splittext splits the text as expected and proceeds with he rest of the animation without a problem. During the replay, the text is already under the format required (i.e. chars, words, or lines) but is not being displayed, which I believe relates to the setting of the propertie
-
Hi guys, I'm having an issue with restarting a master timeline with nested timelines and understanding to how properly clear props from elements. Basically, I have svg that uses symbols that have inline transforms on them applied when exporting from Illustrator. I'm animating x and y values. Then on btn click, I would like to completely restart and reset the animation and elements transform to initial values. The issue is that when I clear all props or just transform, it's removing the inline transform values that are coming from svg. But I would want to revert them back
-
I have an element that is by default set to opacity:0 and then first set to 0.5 and then to 1 via GSAP. When I use a label for the timing the element is not reset to 0 but to a random (?) number somewhere between 0.3 and 0.5. Does restart() not reset all parameters? Thanks!
-
Hey! Longtime user, sometime-poster. I'm working on some ads that have a replay button. I have a secondary animation that plays at the beginning of my main timeline. That secondary animation is generated by a function that returns a timeline, and is called using add(). Secondary animation looks something like this: function makeWaves() { var tl = new TimelineLite(); tl .add('start', 0) .fromTo('#wave1 .teal', 10, {drawSVG:"0 35%"}, {drawSVG: "0% 95%"}, 'start') .fromTo('#wave1 .navy', 10, {drawSVG:"35% 100%"}, {drawSVG: "95% 100%"}, 'start') .fromTo('#wave2
-
Hi all, Im having trouble triggering my 'slideshow', i got the basics working with the timeline, but whenever i restart it, the 'x : ''-='' doenst add the amount, but starts from the previous x value. I have a 'activeCount' variable running, which disables the buttons when the max amount of slides is reached. This part works fine in the console, but ofcourse not really visible when the timeline isn't working correctly. Can someone help me with this? Cheers.
-
Hello, I have a tween that appears on click of an object fades in and starts to rotate infinitely with repeat = -1. When I kill that tween and then re-click the object and and the tween re-starts it adds to the duration from the previous tween, so everytime I click and it begins to rotate its duration += previous-duration+duration Code that fades in and starts to rotate object TweenMax.to([".planet1UI>img"], 0.8, { autoAlpha: 1, delay: 1.5, onComplete: function() { TweenMax.to(".planet1UI>img", 4, { rotation: 360, e
-
Hi there, i have a timelineMax with many animations added. when i click a button i want reset the timeline and add completly new animations to the timeline so i do: timeline.clear() timeline.to(myAnimation) timeline.restart() unfortunately some svgs are stuck in the middle of the former Animations, because the restart/clear doesnt wait till the end of those animation, but interrupts them. How can i wait till the current animation has finished and then restart/clear? Im not at the end of the timeline so timeline.progress() is not an option. Thank y
-
I have a button which starts an animation. What I want to do is restart the animation if the user pushes the button during an existing animation. The code below just stops the tween for a split second then continues the existing animation. myTween = TweenLite.to( circle, 1, { opacity: 0, attr: { r: 12, }, ease: Power2.easeIn, onStart: reset, onComplete: reset, onOverwrite: () => myTween .restart() } )
-
Hi, Im having troubles with the restart, is missing the "first line" and dont is the same at start, the line tl.to("#imagen1", 6, { scale:1.2,alpha:1 , ease: Power0.easeOut }, "1"); doesnt work when i repeat it. Do you know why, or how to fix this error?? (function () { //TWEENS var tl = new TimelineLite({ //onComplete:rewind onStart:go1, onComplete:rewind }); tl.timeScale(1); //tl.from("#logo",0, { scale:0.0, alpha:0, ease: Power2.easeOut }, "=0"); //tl.addLabel("cartela1"); tl.from("#imagen1
-
I have a button that when clicked, triggers my timeline to play. There is no delay on start and on the first click it works fine. On subsequent clicks, it takes time for the animation to start. Any idea what I'm doing wrong? I've tried triggering the animation with just TL.restart() and also having an onComplete function that sets the timeline's progress to 0 and pauses it. Any idea how I remove that delay on subsequent clicks? Code here: var tl = new TimelineMax({paused: true, onComplete: resetTl}); TweenMax.set('.fab', {perspective: 200}) tl.to('#sendplane', 1, {rotation: -2 -
I think this library is awesome and works great! Thanks for taking the time to make it So I am building a page that when you click on a button, a bunch of photos will fade and scale down into random positions in a container. I have made three different timelines for each group of photos that will incrementally increase in speed until the last group which will slow back down again. The animation is smooth and works great. My problem is I have created a button that will slide out when that last timeline finishes. When someone clicks on it, I want to be able to just replay the entire animation
-
I have created a "pulse" animation using two staggerTo animations on TimelineLite. Initial play works well. However, restarting the timeline (on hover) plays all animations at once. I suspect it ignores initial delay values created by staggerTo? What am I doing wrong? Is there a better way to create this animation?
-
Hi everyone, like you can see in the codePen I'm working on something like an app-onboarding. It's one of my first "serious" TweenMax project and I'm still not a pro so maybe you can see some errors somewhere, but my question is another. Like you can see at the end I would restart the entire animation, but I made it with a main timeline and some secondary timelines (some are nested inside the main one, some are external). Like you can see if you try to restart the animation more than one time something is going wrong, and I cannot understand why because in you check the "onComplete" functio
-
I'm new to GSAP so I'm sure I'm doing something wrong. I have the beginning of a game I'm working on: www.giebler.com/IMS/iWin/Game/Game2.html (My graphic designer hasn't animated the avatar yet). While working on it, a tap or click of the mouse executes tl.restart() so I can repeat the animation. However, after a few restarts, the avatar stops at the bridge for several of the timeline events, but eventually jumps to the end. Can someone look at my source (above URL) and tell me what I'm doing wrong? Thanks!
-
deleted
-
Hi there. I've been searching on this site and haven't been able to find anything to solve my problem but I should mention I'm no expert. I've been working on banner ads (was used to working with Flash but now using HTML5) and I want to be able to make the banners repeat but ONLY TO A CERTAIN POINT. I've attached some very simplified code to give an idea of what I'm talking about. I'm using 'restart' to repeat the banner but I want the animation to only repeat once and to stop at a certain point in the case below I want it to stop where the cta fades in, i.e., the third to last line of the tim
-
The issue: When replaying the SplitText animation, some of the letters on the right are not starting the animation straight away. Instead of sliding in as they are supposed to, they are already positioned and only start the animation from there. This doesn't happen when the animation plays for the first time, only when revisiting the first slide after paging through the other slides. This happens in Firefox, Opera and IE latest version.
-
Hello all ! I'm new to the greensock API, and therefore also new to the forum ! Well, first of all, I'd like to congratulate for the great job, the APIs are awesome ! I'm also just getting started in AS3, as I've always been using AS2 so far, but that's another subject... After a couple days, I think I'm aleady getting things to work nicely, so I'm pretty pleased with the quality of the platform, it makes AS3 look easy ! I got a nice animation playing, with tweens nested in timelines, all nested in one master timeline, I named masterTimeline. In the end, a button allows to restar
-
Is there any way I can reduce the size of TweenLite's footprint within my Flash banner? On publish, Actionscript 2.0 Classes make up 20K of my 32K banner. I'm not doing anything crazy here, just fading in/out and moving up/down. I tried using TweenNano...file size was GREAT. But I couldn't figure out how to make my banner repeat only two times, since there is no "repeat" or "restart" features like there are in TweenLite. Am I importing something that I don't need? Here's my AS2.0 TweenLite Code: // import the tween engine import com.greensock.*; import com.greensock.easing.*; /
