Search the Community
Showing results for tags 'onUpdate'.
Found 18 results
-
The gallery is written in scrollTrigger gsap. I want to get this result: https://tanyatimal.studio/portraits/hypnomoves-maria. Everything works, but if you scroll several times, it creates a lot of scrollTrigger. Here is the code: const panels = gsap.utils.toArray(".gallery__item"); let panelsContainer = document.querySelector(".gallery__wrap"); let prevSectionIndex = -1; // Function to animate a specific panel function animatePanel(panelIndex) { gsap.to(panels[panelIndex], { scale: 0.7, scrollTrigger: { trigger: panels[panelIndex + 1], start: "top top", scrub: 1, markers: 1, }, }); console.log("animate " + panelIndex); } let tween = gsap.to(panels, { xPercent: -100 * (panels.length - 1), ease: "none", scrollTrigger: { trigger: ".gallery__wrap", pin: true, start: "top top", scrub: 1, onUpdate: (self) => { const progress = self.progress; const sectionIndex = Math.round(progress * (panels.length - 1)); if (sectionIndex !== prevSectionIndex) { //console.log(sectionIndex); animatePanel(sectionIndex - 1); prevSectionIndex = sectionIndex; } }, end: () => "+=" + (panelsContainer.offsetWidth - innerWidth), }, }); I can't understand what the problem is. I have tried many things, but I want to solve it using gsap. thanks for any help.
-
I want to trigger an animation from a scrolltrigger in both directions, i.e it starts growing when the .intro class comes up into the viewport and then reverses when it scrolls back down again. I am hence looking to use Toggle Actions. I want the animation to continue unless the the class moves away. I can get it to work where its fully controlled by the scroll i.e. if the user stops scrolling, the animation stops, but I want the animation to complete or complete reverse once it has been triggered. In the code below, I've set it up with a separate scrolltrigger and tween, but you'll see commented out code where I tried to do it all in one. In the current version, it says "Cannot read properties of undefined (reading 'progress')" within drawStopSign, presumably because self.progress isn't defined. self.progress does work in the commented out consolidated version of scrolltrigger/ tween. Here is my code https://svelte.dev/repl/d09e192bca00453cae102eb91b4625c3?version=3.32.3
-
Nested timeline, onUpdate firing unexpectedly after first run
Indigo Slate UI posted a topic in GSAP
Hi folks! I have a parent timeline consisting multiple child timelines with various durations and tweens. I create the parent timeline empty and paused, then add child timelines in a for loop, adding pause at the end of each. I use onStart and onUpdate methods to check the child timeline progress and update the progress bar styling on DOM, along other things. First run is working as intended, but when I use parent.restart() or parent.seek("childLabel").play(), the onUpdate of the next child timeline fires at the end of current child timeline. Behavior can be seen on console as well. Any ideas why? -
Hi guys Im having a issue with onUpdate function in one animation, as the title says onUpdate doesn't fire when we are in another tab, this is some of my code: mainProgressAnimation = gsap.fromTo(mainLoadingCircle, { drawSVG: '0%', visibility: 'visible', }, { drawSVG: '100%', ease: 'none', duration: totalDuration, onUpdate: __searchingProgressHandler, }); function __searchingProgressHandler() { if (mainProgressAnimation) { actualProgress = mainProgressAnimation.progress() * 100; } var roundActualProgess = Math.round(actualProgress); $('.js-progress-percentage').html(roundActualProgess+"%"); if (roundActualProgess >= actualStartPoint && roundActualProgess < 100) { gsap.fromTo([secondaryLoadingCircle, secondaryLoadingCircleMobile], { drawSVG: '0%', visibility: 'visible', }, { drawSVG: '100%', ease: 'none', duration: duration, }); } } I remove some part of the code but basically in the update I have a function to display in the html the current progress(Im using a circular loading bar), also I have other small loadings that I need to start when the progress is like 20% Im checking that in the same update function but when I go to another tab the onUpdate function doesn't fire, Im using gsap.ticker.lagSmoothing(0);
-
Hi, I'm wondering if it would be possible to randomise number AND pass it to the animation on update: $('.dot').each(function(e){ var floatingThis = new TimelineMax({repeat:-1, yoyo: true, onUpdate: update}); var timing = Math.floor(Math.random() * 10) + 8, posY = Math.floor(Math.random() * 90) + 0, posX = Math.floor(Math.random() * 100) + 0; function update(){ timing = Math.floor(Math.random() * 10) + 1, posY = Math.floor(Math.random() * 90) + -90, posX = Math.floor(Math.random() * 6) + 1; // console.log(timing, posY, posX); // floatingThis .to($(this), 1, {x: posX + 'vw', y: posY + 'vh'}); // floatingThis.play(); } console.log(timing, posY, posX); floatingThis .to($(this), 1, {x: posX + 'vw', y: posY + 'vh', ease: Power0.easeNone}); }); I'm pretty sure it is , I think I saw something on the web and probably an answer here on the forum, but I can't find it anymore. I'd like my dots to float randomly (at least on the y axis, on the x axis as well bu not that far) on the page, not sure if it can be done using onUpdate tho. Another question/issue, vh and vw are not working at all, I'm randomising number between 90 and 0, so let say that it's 80, my dot should go out of the screen, but it's not the case, all my dots are staying almost on the same line without going further. So either I can't use vh and vh and than the animation shouldn't work at all or it should respect vh and vw value (that's my understanding). Thank you
-
Hi guys, first of all a big thank you. This is my first post, I just signed up and I guess its in order to thank you for creating such a stable library. It is an essential part of a project I have been working on last couple of years....and it is the only lib that hasn't been touched, or i might say "retouched" :-). Just to mention, even jquery 3 got a rework, face lifting... So, my only question, after all this years is : Can internal clock be somehow exposed? Does the clock tick if no animations are going, or only when something is active? If a lot is happening, are all tweens, timelines and everything ticking to same clock? Can onUpdate() for all functions (to, from, stagger....) be accessed or extended somehow? All these questions are for more or less same reason...I need to do something inside my app on every GSAP tick (update transformation data of elements, bounding boxes of selected elements and similar). I guess i dont even need to execute some code...just to know has it ticked... I could go and make a to() function run in loop, indefinitely and update a var, or execute code on every onUpdate(), in background... if there is no other way and all tick to same clock. Thanks in advance
-
Hi, I'm fairly good user of the lib, which i find awesome. thanks I'm having this case right now where i tween a plain numeric value, which i round with the roundProps plugin, and to which i react whenever there's an update with the onUpdate() hook. As the tween runs, the onUpdate() function is fired for every single step on the way, ignoring the fact that the value is rounded in post treatment by the plugin, firing unnecessary onUpdates on the way. Is there a way to prevent that ? Quite simple example : let wrapper = { index: 0, length : 0 }; TweenMax.killAll(); TweenMax.to(wrapper, 2, { length: 10 , roundProps: 'length' , onUpdate: value => { console.log(wrapper.length) } }) Thanks for the help, J.
-
Lets say I have a complex TimelineLite instance, which is maybe tweening some DOM elements' CSS properties but also is tweening some pure JS properties which are used in drawing on canvas. Any time one of those canvas related properties updates, I want to call a function that redraws the canvas, but if some of those tweens are overlapping, I want to be sure that I am not redrawing the canvas more than once per tick. Is there a baked in way to achieve this? Or is my best bet to have the drawing method be a pre-throttled method? Cons to that would be that the throttling is then set at a hard ms time, rather than at the current requestAnimationFrame rate.
-
TweenMax.staggerFromTo(counterElement.find('g path'), details.speed, {drawSVG:"0", ease:Sine.easeOut}, {drawSVG:details.percentage+"%", onUpdate: function(){console.log(this)} }); The animation works correctly. The onUpdate is working either. Now I want to get the current percentage of the drawSVG in the onUpdate. I looked in the this result object, but can't find any variable with current percentage. How to achieve this?
-
I've come come across a strange behaviour that I would like to understand. It might be bug, but I'm not sure. When setting immediateRender to true I would have guessed that onUpdate would also fire once during that initial render, but it seems to depend on the type of tween involved. .to fires the onUpdate while .from and .fromTo doesn't. Example: var obj1 = {a: 0}; var obj2 = {a: 0}; var obj3 = {a: 0}; // logs "update1" TweenLite.to(obj1, 1, {a: 1, onUpdate: function() { console.log("update1"); }, immediateRender: true, paused: true}); // logs nothing TweenLite.from(obj2, 1, {a: 1, onUpdate: function() { console.log("update2"); }, immediateRender: true, paused: true}); // logs nothing TweenLite.fromTo(obj3, 1, {a: 0}, {a: 1, onUpdate: function() { console.log("update3"); }, immediateRender: true, paused: true});
-
Wondering if someone can help shed some light on something I am trying to do with GSAP which I just suspect I am going the wrong way about solving. Essentially there is a dial that spins for a random amount of 360° rotations and it finally settles on one of 10 segments (each 36° in size). What I am hoping to achieve is the segments to animate as the dial goes past them each time (so in sync with the speed of dial). I have very crudely recreated in CodePen, the 3 issues i think I have are: • I can't get the value returned from updateProps to always be a 0-360° value - it gets higher and higher the more it spins? • if the dial spins really fast my current way of calling the function segmentGlow() sometimes misses out if the numbers are jumping up in big steps • i really want the segments to animate each time the dial passes, but I’m not sure if calling the timeline in the function again works I’m hoping I’m missing out on something and there is a much easier way of solving this…. any pointers/help greatly appreciated -
disclaimer: Long time user of GreenSock (back to the days of gs in Flash), and this is a new account. Is it possible to get the actual hex value rendered on each tick of an animation to pass along as params via onUpdate? An example of grand prize winning answer: var prop = {bgColor: "#00ffff"} TweenMax.to(prop, 0.5, {bgColor: "#000", onUpdate: renderHex, onUpdateParams: ["{self}"]}) function renderHex(tween) { console.log(tween.target.bgColor); //show me "#0000ff", "#00000f", ect ect until the transformation is complete // currently returns NaN with expected response } As always, any direction is greatly appreciated and any conversion of expectations (convert hex to something that can be tracked) is welcomed!
-
Hi, I am trying to custom transform an svg polygon by feeding it the points arrays and have it add the difference on every frame between from to: http://pastie.org/private/owhlbo2kxu1rdiy48gjcaa So I want to be able to use the easing if one is provided (ie., in the call Cubic.easeOut) What is the best way to transform the values based on the ease?
-
Bug or feature? When I tl.seek() a paused timeline the animation is "updating" yet the onUpdate function is never called. See plunk.
-
Hello, I'm making a small 2D game and using (naturally) GSAP for the animation engine. So I'm Tweening a bullet by x,y and onUpdate I'm running collision detection to see if the bullet collides with any objects. However as the objects on the DOM increase onUpdate seems to be "skipping" some frames thus "lagging". Is there a better way to run somewhat complex code with TweenMax/Min? Maybe by listening on ticker? Or is onUpdate using requestAnimationFrame already? Thanks in advance!
-
Hi, I am having trouble getting onUpdate event to fire in a TimelineMax that I have nested inside of another TimelineMax. Basically i have a "master" timeline, and a bunch of different "section" timelines. The master timeline has its own onUpdate , but I would like the onUpdate for each of the different sections to call a different function. for example... var master = new TimelineMax( {paused:true, onUpdate:masterUpdate}); var sec1 = new TimelineMax({paused:true, onUpdate:sec1Update}); var sec2 = new TimelineMax({paused:true, onUpdate:sec2Update}); master.add([sec1, sec2], "+=2", "stagger"); master.play(); The problem I am having is that sec1Update, and sec2Update are not getting called when their respective timelines are being played. Any help would be greatly appreciated. Thanks Greg
-
Updating rotation values of tweens inside an infinite timeline
Héctor posted a topic in GSAP (Flash)
Hello, I've got this code: leanLeftTween = TweenMax.to(trapecista, 1, { rotation: -10, ease:Linear.easeNone } ); leanRightTween = TweenMax.to(trapecista, 1, { rotation: +10, ease:Linear.easeNone } ); leanBackLTween = TweenLite.to(trapecista, 1, { rotation: 0, ease:Linear.easeNone } ); leanBackRTween = TweenLite.to(trapecista, 1, { rotation: 0, ease:Linear.easeNone } ); var tremble:TimelineMax = new TimelineMax( { repeat: -1 } ); tremble.append(leanLeftTween); tremble.append(leanBackLTween); tremble.append(leanRightTween); tremble.append(leanBackRTween); TweenLite.delayedCall(1,updateRotation); } private function updateRotation():void { leanLeftTween.updateTo( { rotation: -30 } ); leanRightTween.updateTo( { rotation: 30 } ); } The rotation values are changed, but the animation seems to jump. I just want to increase/decrease the amplitude of the rotation tween on user interaction (using delayedCall is just to simplify code). Any help? -
Hello I'm trying to tween a value of an object like this: var _obj = {v:0}; TweenMax.to(_obj, 1, {v:100, ease: Linear.easeNone, onUpdate:onTweenUpdate}) } function onTweenUpdate () { console.log(_obj.v) } This works fine but what it actually needs are rounded values. I thought "roundProps" would come in handy but the following change causes an error in TweenMax.js: TweenMax.to(_obj, 1, {v:100, roundProps:"v", ease: Linear.easeNone, onUpdate:onTweenUpdate}) Is this code wrong or does "roundProps" not work that way? What I actually would like to do with it is tweening the "currentAnimationFrame" of an EaselJS BitmapAnimation. I used the "onTweenUpdate" function from the example above together with Math.round() as a workaround. But it would be much nicer to tween the currentAnimationFrame directly. Any ideas anyone? Cheers Henry
