Search the Community
Showing results for tags 'delay'.
-
Hello gsap magicians, I'm trying to create this animation, where on load all the images stagger out, then have each image animate from 0% to 100% width over top of the previous image. It kinda works, but if I add a delay to the animation it breaks the continuous look of the animation. Can anyone help? Much appreciated!
-
Hello! Giving context: I'm coming from Framer Motion and porting a menu animation to GSAP. I'm using the same ease and duration as I used in Framer Motion, but I get this strange delay when the reversed animation is played (when you click "CLOSE" you can feel a delay before going back to "MENU"), if I would guess, it looks like the ease is reversed too, giving this strange animation. If it is the ease, what can I do to use the same ease but in the right direction? (sorry for my bad English)
-
Greetings everyone! I'm thrilled to be part of this community, and it's my first foray into using GSAP for animations. While it's proving to be a bit of a challenge, I'm making steady progress thanks to the documentation. I'm just about wrapping up my animations. In my current React project, I'm employing GSAP's ScrollTrigger to animate a component nested within a wrapper, which I've imported into my main JSX file. I've run into a small snag. When a user is scrolling and they hit the ScrollTrigger start line, the animation can retrigger too rapidly, resulting in a less-than-ideal visual experience. I'm wondering if there's a way to introduce some kind of buffer, perhaps in the form of margins, to prevent users from quickly toggling the animation on and off. I've posted a snippet of my code below. I'm eager to optimize my code for the best user experience possible. Your insights would be greatly appreciated! Looking forward to diving deeper into GSAP and learning more. Thank you in advance! Inside my animations.jsx export const SlideUp = ({ children, y }) => { const elementRef = useRef(null); useEffect(() => { const element = elementRef.current; gsap.set(element, { opacity: 0 }); const animateIn = () => { gsap.fromTo( element, { opacity: 0, y: y || 50 }, { opacity: 1, y: 0, duration: 1, ease: 'power3.out' } ); }; const scrollTrigger = ScrollTrigger.create({ trigger: element, start: 'top bottom', onEnter: () => { animateIn(); }, scrub: true, }); return () => { scrollTrigger.kill(); }; }, []); }; Inside my main page <SlideUp> <div className="image-row"> <div className="content-container"> <img className="project-image" src="images/img1.webp" alt="" draggable="false" /> </div> <div className="content-container"> <img className="project-image" src="images/img2.webp" alt="" draggable="false" /> </div> </div> </SlideUp>
- 12 replies
-
- optimization
- scrolltrigger
-
(and 1 more)
Tagged with:
-
Hi, I'm trying to create an animated bar chart that should only animate its barse when scrolled into view. I use jquery to target each chart on the page, then iterate through each set and the bars in each set to set each bar to trigger its animation when the chart as a whole scrolls into view. Each bar is also given an increasing delay so that the cascade on. The problem is, the delay doesn't get applied if scrollTrigger is being used. In the codepen, if you comment out the scrollTrigger lins (26-29), you'll see the delay works. What am I missing here to get this to work? Or is there a more performant/appropriate way to go about this?
- 5 replies
-
- scrolltrigger
- delay
-
(and 1 more)
Tagged with:
-
I am trying animate a SVG element where the element's position/pose is held for a duration and then snaps immediately to a new position/pose, and so on and so on. I have a working example using SteppedEase, but it feels a bit hacky - as it requires me to use an undocumented 'true' parameter (mentioned in: https://greensock.com/forums/topic/13388-steppedease-to-step-immediately) and duplicate the relevant SVG element's path data from the inline SVG image - with a slight modification (otherwise the duplicated path seems to be ignored). In the codepen example - the Red square should snap to align with the Green triangle as it passes the little blue squares (at 0s, 1s and 2s). When I tried using just steps(1) - it stepped once, but at 50% of the inter-blue-square duration (1s in this example). Whereas I need it to step once at 100% of that duration. So the overall behaviour would be more akin to using a series of Hold durations.
-
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.
-
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
-
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
-
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
-
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
- 8 replies
-
- delay
- delayedcall
-
(and 1 more)
Tagged with:
-
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
-
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.
-
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?
-
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 : )
-
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.
-
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.
- 3 replies
-
- delay
- transition
-
(and 1 more)
Tagged with:
-
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}) ;
-
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
-
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.
-
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.
-
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.
-
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?
- 1 reply
-
- timelinemax
- delay
-
(and 2 more)
Tagged with:
-
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.
-
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.