Search the Community
Showing results for tags 'updateto'.
Found 14 results
-
this.menuTimeLine = gsap.timeline({ paused: true, }); this.menuTimeLine .fromTo(this.ref.menu, { x: "-100%", }, { x: "0%", duration: this.state.open ? 0.3 : 2, ease: this.state.open ? "linear" : "expo.out", }, 0).reverse() if (this.menuTimeLine.reversed()) { this.menuTimeLine.play() } else { this.menuTimeLine.reverse() } Button.addEventListener('click', () => { if (this.menuTimeLine.reversed()) { this.menuTimeLine.play(); } else { this.menuTimeLine.reverse() } }) Update Prop or Tween value conditionally whatever it is normal gsap or gsap timeline In Gsap version 2.x.x updateTo can update tweening values or gsap props but what to do in gsap 3.x.x or Gsap vars can help in this issue ? in Codepen example dynamic ease or duration ? besause timeline is outside of onClick ?
-
I tried to update from v.2 to v.3 by swapping out "TweenLite" and "TweenMax" with "gsap" and changed the CDN load TweenMax.min.js script in the footer (WordPress) to the new CDN load gsap.min.js but that didn't work. I tried putting the new script at the bottom of the body tag to no avail. I thought all I needed to do to update what is animating is to update wherever I see TweenLite or TweenMax to gsap, and add the new script to footer, but I guess not. What am I missing? Here's what I'm loading for the front-page of my site (https://siegfriedmedia.com). The animation is the stagger and drawsvg: jQuery(document).ready(function($){ // //when js kicks in show TweenLite.set("#drawsvg_content, .arrow", {visibility:"visible"}) // sm_icon drawSVG TweenMax.fromTo("path", 1.75, {drawSVG:"50% 50%"}, {delay:1, drawSVG:"100% 0%", ease:Linear.easeNone}); //stagger in next 3 and have them remain TweenMax.staggerFrom("#icon_behind, .home_intro, .arrow", 1, {delay:.3, autoAlpha:0, scale:.5, ease: Power4.easeOut, y: -150}, .2); });
-
Hello, Getting a "tl.updateTo is not a function" on mouse over. Trying to make a bounce on the end of the reverse. Has to be something simple. Yes, I know I can make two separate timelines. updateTo is something I plan on using on more complex animation. Thanks.
-
Basically I have a TimelineMax that is populated by some TweenMax. TimelineMax might be triggered multiple times by TimelineMax.restart(). On event window.resize() some vars of TweenMax are updated by TweenMax.updateTo(). All works fine when TimelineMax has not been started. But updateTo() seems to not alter given vars after TimelineMax has been started the first time. Have a look here: http://codepen.io/anon/pen/mJKwJj I) Initial x position is set to 700. II) X position is set to 100 before first restart(). III) This new property is set perfect. IV) All following updateTo() have no effect anymore Did I implement something wrong?
-
Hello, everyone! I would like some help in order to use updateTo function correctly. I create tweens like this : this.tween = TweenMax.fromTo(this.cont2, time/1000, {y:0}, {y:1000, ease:Linear.easeNone, onComplete:on_stop, onCompleteParams:[this.rNum]}); and i would like to be able to stop it during tweening, by setting a new destination y parameter. So i tried to do it like this : this.tween.updateTo({y:500}, false); but this is changing the object's current y position, and not the final y destination. So based on the documentation, i am changing the fromVars Object, instead the toVars Object. My question is, wether i can change the destination position on the fly, and how. Thanks in adnvance! EDIT : I was wrong. The above way to change destination y is correct! It seems like i have to change manually the duration of the tween also. That's why i was getting the wrong visual effect i was looking for. So i rephrase my question. Is there a way to tell the tween to stop at the new updated y parameter, regardless of the initial duration? Or do i have to calculate the distance covered, and figure out how much time it should get. Thanks, and sorry for the misunderstanding...!
-
Hi All, I have looked through this forum here, but I didn't quite see this discussed. I want to change the easing type between a play() and reverse() animation on a TweenMax. However, it seems to change the ease type only once, and all subsequent attempts to use updateTo seem to do nothing. I did find a really hacky way around the issue by adding tween._ease = tween.vars.ease; after the updateTo. You can see this in the CodePen by uncommenting line 4. That does not seem like the right way to actually do this. This feels like I'm just missing something simple, but I've looked at the docs and Googled around and I don't see where my error is.
-
Hi! I wonder why css: {} autowrapping does not work for updateTo function. It seems a little confusing that i can use a simple shorthand syntax within tween properties, but have to print wrapped-in property like {css:{property:value}} inside updateTo function. And the other question: it seems like adding tweens to the timeline with shorthand syntax like this: timeline.to(target, 0, {property: value}); generates TweenLite tweens, that don't have updateTo method. Can I somehow create TweenMax tweens with this syntax at all or do I always have to use something like timeline.add(new TweenMax(target, 0, {property: value})); for this purpose?
-
Dynamic Destination Values Failing with Lag (updateTo, startAt, onStart
Guest posted a topic in GSAP
I am fairly new to GSAP, and am very pleased with its capabilities. My question is: I wish to animate the timeline twice, the first time at a timeScale of 100 (instantaneous), and then once at normal speed. I am capturing the positions of the objects the first time to draw SVG paths so that the user may interact with the underlying tweens graphically. Many of the elements depend the relative positioning of other elements on the screen which are dynamic. I am using the updateTo() method in the startAt parameter to determine the destination values at the time the tween starts, which also updates the tween's duration (and eventually other values). My problem is, that the timeline works fine when it is run at a very slow timeScale. When the timeScale is increased to 100, the calculation of the dynamic destinations appears to cause some lag, and the players are not returned to their original positions (seemingly because of the tweens not being executed synchronously). I have tried to invalidate values before the calculation, which has helped some. My next option is to pause the main timeline when it is evident that the tween's destination values are dynamic in the startAt parameter. Another issue I've encountered is that updating a tween's duration does not update the duration of the timeline it resides on, causing the object to pause briefly before moving on to its next tween. If I update a tween's duration, will it be reflected in the timelines above? I could perform a recalculation once the timeScale(100) timeline has finished drawing before allowing the user to play the timeline themselves. Thanks for any advice on these subjects in advance. -
Hi, First off, thanks for a great library. I've been trying to change a tween on the fly, specifically the x value for a DOM element. For some reason the updateTo method doesn't seem to work. Maybe because x is converted to a css value it is considered a plugin-value when used on dom elements? I've created this pen to illustrate the issue: http://codepen.io/klas/pen/eduhJ If you click the {x: 10} button before you play the animation the tween updates as expected. Any subsequent calls to updateTo after the animation has been played or scrubbed does nothing. The js docs suggests using the DynamicPropsPlugin but as far as I understand it is only available for AS. Not sure it's on the roadmap for js but I can definitely see a use case for it in responsive design. Cheers Klas
-
After updating from 12.0.16 to 12.1.1 (including 12.1) - updateTo no longer works.. First call for the tween uses this (which still works): tweenMap = new TweenMax(grid, 0.001, { tx: newX, ty: newY, onComplete: grid.donePanning, ease: Quad.easeInOut }); repeated calls (dragging) then use this (which no longer works): tweenMap.updateTo({ tx: newX, ty: newY, onComplete: grid.donePanning, ease: Quad.easeInOut }); Reverting back to 12.0.16 everything works ok. Looking at the change diff - there are a number of updates in 12.1. Any idea what might be the underlying issue?
-
Hi, I'm having trouble getting this to work, so I'm wondering if anyone can help? Basically, I'm creating a TimelineMax instance and populating it with some tweens. One of the tweens I'm using to set a div at exactly the window height and another at exactly 0 (cleaned up to make it more generic): tl.to(selectors.$myElement, 0, posObj({ display: 'block', y: $(window).height(), z: 0.001}), "myLabel"); The problem is that the div heights are being resized on browser resize, so that two divs stacked up on each other no longer butt up against each other. I tried approaching it by looping through the tl.getChildren, finding tweens with a "y" var, then updating that number with the new window height, but this doesn't seem to be working as expected. var updateTweens = function () { tl.getChildren().map(function ( item) { if(item.vars["y"]){ if(item.vars["y"]==windowHeight){ item.vars["y"]=$(window).height(); } } }); }; So is there a better way to accomplish this? Bear in mind that I have around 30 tweens to work with and when I tried to use the "tl.add(var myTween=new TweenMax(el, time, vars));" approach everything sort of broke. But any help is greatly appreciated.
-
THIS THING IS DRIVING ME MAD .. PLEASE HELP ! var w = 25; var timeline = new TimelineMax(); var mc1 = new TweenMax(); var mc2 = new TweenMax(); timeline.add( [ mc1.to($('#selector'), 10, {backgroundColor:'red'}), mc2.to($('#selector'), 2.5,{width: w+"%", onComplete: function(){ timeline.pause() }}) ],0,0); // so currently the animation pauses at 2.5 secs instead of 10 // how do i alter mc2's tween now that it has finished, with it staying in the same timeline // I tried this .. (it doesnt work) timeline.append( mc2.updateTo($('#selector'), 5, { width: "50%", onComplete: function(){ timeline.pause()} }, false) );
-
Hi, i am trying to animate an object from its current position to the left so that its scrolling out of the screen. This works so far, the problem is the object dynamically changes its width if you click on an object within it. If i update the tween to animate to the new width value and scroll back to the start the object moves wawy to far. When resetDuration is set to true i can't scroll back to the start, the left value stays at the value from the moment the updateTo gets called. I really hope someone can help me, i'm pretty new to animating with Greensock. var objectwidth = $("#object").width(); var objecttween = TweenMax.to($("#object"), 1.5, {css:{left:-objectwidth}}); $(".widthswitch").click(function () { var newwidth = $(this).width() + objectwidth; $("#object").width(newwidth); objecttween.updateTo({css:{left:-newwidth}}, false); return false; }); Edit: updated blogtween to objecttween, as it should be in the first place
-
Hi Guys, I seem to have a problem with the tweenMax.updateTo method. Given this sample code: _tween = new TweenMax(myMc,2,{rotation:360,repeat:-1,onUpdate:onUpd, ease:Linear.easeNone}); function onUpd():void{ if(_stop){ _tween.updateTo({repeat:1,rotation:_angleToStop, onComplete:onF},true); } } I am expecting the _tween to update 1. its rotation value to the predetermined value in _angleToStop 2, repeat count to change from infinity (-1) to 1 3. for it to call the onComplete method once that 1 rotation is done, where it stops in the correct value; What actually happens is the spinning starts to slow down as i would expect as it is reaching the target value however it then start animating again... Its like the repeat is not working.. Could anyone help me? Seems weird. Thanks, Bynho
