Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'delay'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 48 results

  1. Hi everyone. I have a trouble with master timeline. I can't figure out why all animations in master timeline start when content loaded. I want two animations of the computer to switch each 5~7 seconds . It works fine after the delay finishes. There are Mater timeline on the bottom of codes and functions are top of it. Could you give me some advises to fix this problem? Thank you.
  2. Hi, I have a problem when I use batch method from scrollTrigger, when I begin on the top of the page and I scroll to the bottom all is working well, but if I refresh a page (and the scroll position is keeping), or if I use an html achor (exemple.com/home#bloc3), or if I directly set a position with scrollTop method, In all this cases I need to wait all the "bloc" create before, have finished the "stagger" time before to see the animation (see the codepen, you will see some seconds before the animation start). Have you an idea to prevent this problem ? Thanks
  3. Hello On my first gsap project I'm struggling to work out how I can animate all the elements with the classname of ---l to start at the same time but have a tiny delay and finish a little after one another. I'm using the awesome timeline feature so I can chain events. const tl = gsap.timeline({ paused: true }) tl.to(nav, { duration: 1.1, ease: "power2", x: 0, y: 0, z: 0 }) .from(iLettersList, { duration: 1.1, x: 15, transformOrigin: "left" }, "-=1.2") Each class ---l would need a delay going up by say 0.3s, 0.6s, 0.9s, 1.2s and so on. Sure I could set a {delay:2} on each to() or from() but you wouldn't be able to achieve this kind of effect. https://codepen.io/d--c/pen/PoPZvqd Perhaps this may be too difficult for a first stab but it would be awesome to work out how to do with GSAP. Thanks very much for any help and guidance
  4. Hi, I wander how can I make the delay prop work every time I call .play() method. I also tried to chain the .delay(s) method like tween.delay(1).play() but it did't work. ☹️ Someone more experienced can help me pls? Thanks
  5. Hello there, since I updated to GSAP 3.0, I am struggling to make timelines / timeline-functions run with a delay. I added a codepen-demo to demonstrate my issue. Am I overseeing something or is this a problem in GSAP 3.0? Cheers, Paul
  6. Hi there, I am testing the splitText plugin on codepen before purchasing a membership. I`ve created an array with my text fragments and injected them with createDocumentFragment. I`ve then created a timeline within my for loop. This works well for animating my objects with staggerTo/staggerFrom. But I seem unable to find out two things: (1) How can I implement some kind of stagger "curve", instead of a straight line graph between the objects? I`ve already tried it with the customEase plugin and getRatio property but with no success. The animation between the stagger objects should start slow and should speed up over time. (2) The last item of the stagger Timeline should remain. I am looping the timeline on codepen so you can get a better sense. But on production side the timeline should only play once and the last item (This text should stay) should remain. (3) Does this way of implementation weigh heavy regarding performance, especially when I end up adding even more words to my array (e.g. 23-26)? Are there any things, I could improve? Would be great if I can some tips from you awesome guys! Have a good day! Pascal
  7. I am new to GSAP and I am trying to figure out what is the best way to fire a callback function at the beginning and end or a repeating animation. Here is the code i've tried so far: var tl = new TimelineMax({ delay: 3.0, repeat: -1, repeatDelay: 3.0, yoyo: true, onRepeat: function () { console.log("on repeat, called with delay...bad") }, onReverseComplete: function () { console.log("reverse complete, never called bacause of repeat forever") } }) A few things to keep in mind: I would like the callback function to execute BEFORE the delay on the animation start (playing forward) and on the reverse (playing reverse). So the timeline should execute like this: Start -> callback -> delay -> play animation -> animation end - > callback -> delay -> reverse animation -> reverse end -> callback -> delay (repeat forever) (Start and callback can be swapped, as long as the callback happens before the delay) Any help would be greatly appreciated. Thanks.
  8. I'm creating a landing page and using GSAP to animate some text according the the user's scroll position. How can I keep the landing page in full view and only start scrolling down the page once the text animation has reached its end?
  9. Hi. This is my first time using Greensock, also I'm a beginner in javascript. I don't know if my code is beautiful or not, and I ask you to not pay too much attention to that aspect (or maybe you should, that'd help me) Basically, everything is working as I want it to, there's just one minor change I want: Before the text fades out again, I want there to be a delay again. I don't know how or where to put that delay in. All suggestions are welcome : )
  10. Hey everyone, I was staggering some elements from the middle by using cycle and a delay function. Diaco showed me this formula a couple years ago. return Math.abs(Math.floor(yourElements.length / 2) - i) * 0.25; This works great for an odd number of elements, but with an even number of elements the middle two should start at the same time so this function doesn't work correctly. I came up with a new formula for an even number of elements. return Math.floor(Math.abs(yourElements.length / 2 - 0.1 - i)) * 0.25; That seems to work just fine. I'm just using the modulus operator to figure if the element list length is odd or even and then using the appropriate formula to return the correct value. My question is can anyone think of a way to calculate it with one formula whether it's odd or even? I'm thinking I'm gonna need two different formulas which is no big deal, but wanted to make sure I'm not missing something obvious here. Happy tweening.
  11. Hi, I created a simple pen just to show you the issue I am having in my real project and is related to the transition-delay because I need the animation starts only when the mouse stays in the element the desire time and not before, with CSS is easy because the transition-delay is the one for the job but I don't know how to do the same using JS/GSAP, do you have any idea? In the following example you can see that if you pass your mouse over the orange div, the animation will be triggered only if you stay for more than 0.5s so you can like move your mouse over it and the animation will not be triggered but this is not happening with the blue one because if you put your mouse over the div and you moved out before the 0.5s, the animation still will be triggered.
  12. 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}) ;
  13. Hi everyone, I am trying to perform an animation with a delay on every subsequent SVG 'path'. In this Codepen link you can see that every letter of the SVG logo is separated by a 'path'. How do I perform a DrawSVG animation delay for each path, similar to how it looks like in here. This was animated using Anime.js, but sadly it couldn't control the animation using events as good as DrawSVG, but the delay of each letter was what I'm looking for. Is there a quick way to do this? Or would I have to manually delay every path by giving it IDs? Thanks
  14. Hi, Is it possible to have a negative delay on a timeline. var tl2 = new TimelineMax({delay:-10, repeat: -1}); tl2.fromTo(".cloud-container-2", 5,{top:200, scale:1, opacity:0}, {top:200, scale:1, opacity:1, ease:Power0.easeNone}) tl2.to(".cloud-container-2", 5, {top:300, scale:2, ease:Power0.easeNone}) tl2.to(".cloud-container-2", 5, {top:400, scale:3, ease:Power0.easeNone}) This does not work.
  15. First of all sorry for not posting codepen URL, for some reason, my code isn't executing on codepen. Below is the TimelineMax code I prepared for the kind of animation I need. tl .to(panel1, 0.3, {width:'50%',ease:Power3.easeOut}) .to(panel2, 0.3, {left:'50%', ease:Power4.easeOut},panel1) .to(panel2, 0.3, {height:'50vh',width:'25%', ease:Power1.easeOut}) .to(panel5, 0.3, {width:'25%',height:'50vh',left:'75%'},panel2) .to(panel3, 0.3, {top:'50%'},panel2) .to(panel3, 0.3, {width:'25%',height:'50vh'}) .to(panel4, 0.3,{left:'75%',width:'25%',top:'50%'}); You could see how panel2 and panel3 have more than one ".to" that is because of the kind of animation I need where panel2 should first get to 50% left and then get to 50vh height, 25% width. Now, I want panel5 to follow along with panel2 but not the first panel2 but the second one. How can I target only the second panel2 (the one with height: '50vh', width:'25%') for the panel5? Hopefully, it makes sense to you. Thank you so much in advance. Any help is appreciated.
  16. Hey guys, i am new to greensock. i want to start the 3th .from after a delay of 2 second and continue the animation ( make it wiggle ) and repeat the animation. Basically i want to wiggle the animation after 2 seconds after the previous 2 .from are done. and another question: can you point me to some basic tutorials explaining labels,timelines and nested timelines. thank you guys in advance, best regards, Tim.
  17. Hello. In the beginning on my code I declare a new TimelineMax object, and I add a new tween that has a delay using the to() method (this is a simplified version, i do add more tweens to this Timeline). The delay is defined by a previously declared variable (var). var tl = new TimelineMax() .to("#answerTextarea", 1, { someProp: "value", delay: delayVariable }) After this, delayVariable changes. When i replay the tl though, the delay is not equal to the new value. I tried invalidating tl using the invalidate() method, but this doesn't invalidate the delay. How should I proceed so that the delay is updated everytime I restart the tl?
  18. Hi Chaps, I'm just mapping out a Greensock animation and I've noticed there is a very minor delay between tweens on a timeline. Is this dictated by the graphics processor / quality of my device, or is there a very small delay added as default? In the attached codepen link I've done a tween of a box moving on the x and y axis. On the final tween I've put a negative delay value of '-=0.15' to fire the tween early, and the tween seems to fire immediately. I appreciate by default there probably has to be some minor delay otherwise the movements could look too unnatural / move unnaturally fast if not. The reason I ask is the timeline I'm building is going to be quite a complex animation and knowing any default value may well be useful. If there isn't, I guess I'll have to eyeball it. Thanks as ever, Emily.
  19. Hey there, if I want a pause of 2 seconds between Tweens in a Timeline, I got used to write tl.to({}, 2, {}); But it feels just not right and I wonder if there is something like tl.wait(2). First I thought "addPause" is what I need, but I believe it wasn't. This must be an everyday issue I assume, so I think I am just dumb and or blind. Thanks for some input.
  20. 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: -20, opacity: 0, x: '+=100', ease: Elastic.easeIn.config(1, .9), onComplete: resetPlane}) .to('.fab', .25, {scale: 1.2, boxShadow: '0px 7px 15px rgba(0,0,0,0.1)'}, '-=.8') .to('.fab', 2, {rotationY: -360, ease: Elastic.easeIn.config(1, .9)}, '-=1.8') .fromTo('.checkmark', .5, {drawSVG: '0%'}, {drawSVG: '100%'}) .to('.fab', 2, {rotationY: 360, ease: Elastic.easeIn.config(1, .9)}) .to('.checkmark', .2, {opacity: 0}, '-=1.1') .to('#sendplane', 1, {x: '+=100',opacity: 1}, '-=.4') .to('.fab', .25, {scale: 1,boxShadow: '0px 0px 5px rgba(0,0,0,0.3)'}) function resetPlane(){ TweenMax.set('#sendplane', {x:'-=200', rotation: 0, opacity: 1}) } function resetTl(){ tl.progress(0) tl.pause() } document.getElementById('fab').addEventListener('click', function(){ tl.play() //I've also tried tl.restart() and it still has a delay. })
  21. Hi, I have a question about looping and delaying some elements. In the codepen link I provided will be an example of what I want to achieve. The problem is that I don't know how to loop the code... If I paste the code 16 times it will work for all of the rectangles. Is it possible to make a loop with TweenLite? This is a part of my code: var rect = document.querySelectorAll('.rectangle'); i = 15; var tl = new TimelineLite(); tl .from(rect[i--], 0.3, { y: '-1000', scaleY:5, ease:Power1.easeIn }, "fall") .to(rect[i+1], 0.15, { transformOrigin: "bottom 50%", scaleY: 0.75, scaleX:1.5, ease:Power1.easeOut }, "squash") .to(rect[i+1], 0.2, { y: '-200', scaleY:1.3, scaleX:0.8, ease:Power1.easeOut }, "bounce") .to(rect[i+1], 0.15, { y: '0', scaleY:1, scaleX:1, ease:Power1.easeIn }) .to(rect[i+1], 0.2, { y: '0', scaleY:.8, scaleX:1.35, ease:Power1.easeOut }, "bounce-fall") .to(rect[i+1], 0.2, { y: '-100', scaleY:1.2, scaleX:0.8, ease:Power1.easeOut }, "second-bounce") .to(rect[i+1], 0.15, { y: '0', scaleY:1, scaleX:1, ease:Power1.easeOut }, "final-position") I want to loop this animation for every rectangle (there are 16) with a delay of 0.5 seconds between each rectangle falling. How can i achieve this? Thanks in advance
  22. Hi, I'm not an expert in GSAP and I have some troubles with my SVG animation. Indeed, I want to create a pre-loading effect on my page but I have some issues regarding the delay. I made a screenshot which show my problem : https://vimeo.com/189758547 My SVG appears at the beginning of my animation but I want to reveal the SVG by animating the strokes. Here is my JS code (the link to my codepen) : $(window).load(function () { $(function () { var first = $('#firstletter'), second = $('#secondletter'), competences = $('.competence'), // Sample script for Tweening on a Timeline tl = new TimelineMax({ delay:0, paused: false, yoyo: false }); tl.fromTo([first, second], 3, { drawSVG: "100% 100%" }, { drawSVG: "0% 100% ", ease: SlowMo.easeOut }); tl.fromTo(competences, 1, { opacity: 0, top: 0 }, { opacity: 1, top: "50%" }); }); $('#loader-overlay').delay(5000).fadeOut('slow'); // 5 sec de délai avant que la div ne disparaisse }); Thank you for your help
  23. Hi, I created a timeline with lots of tweens, these tweens have delays on them and what I need is to skip all the delays when I reverse this timeline, long story short on reverse all the tweens must start immediately. Thanks in advance
  24. I'm using Fullpage.js and I have animated the elements of each section to fade in. The animations work awesomely well but the ones from the lower sections run offscreen and when the user scrolls to the section the elements are static. I need the animations of a specific section to commence when the user scrolls to that section. Any way i can achieve this? Thanks in advance!