Jump to content

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

Search the Community

Showing results for tags 'updateto'.

  • 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


  • FAQ Landing Page


  • Examples
  • Showcase


  • Products
  • Plugins


  • Learning Center
  • Blog


  • ScrollTrigger Demos


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 14 results

  1. 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
  2. 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 stagge
  3. 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.
  4. 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() hav
  5. 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 toV
  6. 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 doc
  7. 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 Tw
  8. 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
  9. Klas

    TweenMax updateTo

    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 sugge
  10. 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?
  11. 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
  12. 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: f
  13. 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 = $("#
  14. 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; W