Jump to content
Search Community

Search the Community

Showing results for tags 'invalidate'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 8 results

  1. Hello everyone So this is a topic that comes back often, I guess both in the forums and in my head. Today's one of those times, and it would be nice if we could find a way to put it to rest together! I'm talking about how to properly use invalidate() and to make timelines that can adapt to things like a window resize or other events. Please have a look at the codepen. When you press play, the sphere moves along the line using 5 different techniques: passing values to the x and y parameters passing functions to x and y passing values that are calculated with getBoundingClientRect() inside the timeline tweening the transform property as a string (in order to use em units) tweening the xPercent and yPercent parameters If you resize the window or use the up and down buttons, the square changes size (it's based on its font-size). Every time you press the play, the timeline is invalidated before playing again. It becomes apparent that the only technique that is affected by invalidate() is the 2nd one: the functions are re-evaluated at this point. xPercent and yPercent are unaffected but they do work as expected since they're percent-based (you don't even have to invalidate). Something like val = 2; tl.to(element, 1, {x: val}); will always behave the same way, even if you change val and then invalidate tl. I believe this is because val is a primitive, and so what's passed to x is the value itself, not a reference to the variable. Is this correct, or am I missing something? In other words, what's the optimal way to create and work with timelines to make sure they are responsive (without relying entirely on xPercent and yPercent, as that isn't always an option)? Ideally, I hope we can fully clear this up but for myself and others, and maybe have a pinned thread or a page in the docs that clarifies this, as it's a constant headache I think
  2. 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?
  3. Working on an app where users can position an SVG on the "stage" and pick an "IN" animation. Uses a from tween that starts offstage and ends wherever the user has positioned the SVG. I pulled the stage setup, some of the code and a few buttons as well as a preselected "already-added" SVG to the Codepen. There's a master timeline and each SVG becomes an element defined in a new svgObject containing its own timelines for animation onto the stage (the "IN" timeline), animation while on the stage (the "ONSTAGE" timeline) and animation off the stage (the "OUT" timeline). There can be multiple SVGs and each can have it's own tweens as well as start and end times, positions, etc for each of the 3 timelines. Kind of like this... Right now, I'm just trying to figure out how to dynamically change the "IN" tween if the user clicks a different "IN" option button. Also, trying to figure out how to properly pass new vars like ease changes. My thought was to overwrite the "in" tween and "in" timeline every time a new "in" option is chosen and to do the same for the out tween and timeline. (The onstage timeline might contain multiple options where I'll need to give the user the option to add/chain new vars and tweens) I must not understand the overwrite var and I also must not understand invalidate. I added... overwrite:'all',onOverwrite:overwrittenTween ... to the tweens but the overwrittenTween function is never running. I'm doing this at the end of each "IN" tween button click listener function... var theTweens = masterTL.getChildren(); console.log("theTweens",theTweens); ... (masterTL is the master timeline), and the tweens are all still there and growing with each click of a new "in" tween option. Also, trying to change the ease is not working as I thought it was supposed to. When I add a new ease like this: activeSVG.twIn.vars.ease = newEase; activeSVG.twIn.seek(0).invalidate(); The tween seems to break. As hinted at above, for each SVG, there's an object structured like this... var newSVG = (function() { var SVG = { el: $('#svg-0'), // the SVG itself id: "0", gp: $('#gp-0'), // there's a group that wraps each SVG with the same id# rotating: null, // GSAP Draggable object dragging: null, // GSAP Draggable object resizing: null, // GSAP Draggable object tlIn: new TimelineMax(), // in timeline twIn: null, // in tween tlStage: new TimelineMax(), // onstage timeline twStage: null, // onstage tween tlOut: new TimelineMax(), // out timeline twOut: null // out tween } return SVG; }); ... so I can set all the in/out/stage timelines and tweens for each object there. I bet I'm missing something really obvious.
  4. BradLee

    invalidate()

    Can anyone see why this isn't working? I push a button to translate a div to the right, then invalidate the tween and reset the translation to 0 via div's style property. My assumption is that doing these 2 things should reset the div's transform. However, when I run the tween again it doesn't act properly (the div jumps instead of animating). <button>push</button> <div></div> div { width: 100px; height: 100px; background: tomato; display: inline-block; } let div = document.querySelector(`div`); let btn = document.querySelector(`button`); const move = () => { const onComplete = () => { div.style.transform = `translateX(0)`; }; TweenLite.to(div, 1, {x: 100, onComplete}).invalidate(); }; btn.addEventListener(`click`, () => move());
  5. Hi, Firstly, let me say a huge thanks to Greensock for providing such amazing tools over the years, I've been using your products since AS2 Tweenlite and they never fail to amaze me with their power and usability...thank you!! I have made a simple fiddle to demo the problem here : http://jsfiddle.net/x0b/cXR7L My situation is this: I want to have a main timeline that has 3 sections - an intro, a changeable middle section and an outro, in that order. Once the user has completed the middle section and the outro, they click a button and a new middle section replaces the current one, the rest remains the same. Once the button is clicked I pause(0) both the outro and middle section to reset their tweens, then kill them both so they get removed from the main timeline (incidentally - remove does not seem to do anything for me as the duration of the main timeline remains the same if I check it after doing remove - is this a correct behaviour?). Then I add the new middle section and the outro back to the timeline. The timeline is controlled by scrolling the output window and runs correctly initially; the green box moves down (intro) the blue box goes left 100px further than the yelow (middle section) and then they come back to their starting positions whilst the red box comes from 1000px to cover the green box (outro). The problems once the button is clicked are two fold 1) The intro runs ok, the new middle section runs ok, but then as soon as the timeline enters the outro, the blue box jumps out to 200px and the yellow box jumps to 100px. I guess this is because the outro tween has for some reason stored these values the first time it is run, even though it was killed. 2) If I invalidate() the outro timeline, the blue box glitch disappears but then the from tween does not work correctly, I presume this is because the invalidate means the timeline has forgotten where the from tween started from? So I'm kind of stuck between two problems and not sure whether I'm using the API wrong or the API can't do what I need. Can anyone please provide some insight? Thanks!
  6. I'm trying to understand how a tween's invalidate() function works. According to the docs, if you invalidate() and restart() a tween, the timeline will take the new parameters of the tween, right? I tried to build a simple example to understand this behavior, but what ends up happening is really confusing. Here's what I have. (I'm using KineticJS) var t1 = new TimelineMax({paused:true, onUpdate:stageUpdate, onUpdateScope:stage}); var tweenX = TweenMax.fromTo(rect, 1, {setX:100}, {setX:500}); var tweenY = TweenMax.fromTo(rect, 1, {setY:100}, {setY:0}); t1.add(tweenX,0); t1.add(tweenY,1); When I add these tweens to the timeline, they work as expected. Now, I have a function where I'm trying to update the way tweenY works. So, I update the parameters, invalidate the tween and the timeline and restart the timeline. function updateTween() { tweenY.invalidate(); tweenY = TweenMax.fromTo(rect, 1, {setY:100}, {setY:200}); t1.seek(0).invalidate(); t1.restart(); } However, the behavior is really confusing. Original behavior: 'rect' moves right to x:500, then moves up to y:0. After updating the tween, what I thought would happen: 'rect' moves right to x:500, then moves down to y:200. What actually happens: 'rect' moves diagonally to x:500, y:200, then moves up to y:0 I built a codepen to show this: http://codepen.io/anon/pen/fLAkd Can someone help me understand this please?
  7. How would you clear all CSS properties that were applied to an animation element by TweenMax? var tween = TweenMax.to($image, 5, {css:{ scale:1.5 }, ease: Linear.easeInOut, onComplete: function(){ tween.invalidate().progress(0); } }); I basically want to reset or clear all CSS properties that TweenMax adds to the inline style tag. So i can get the element back to its original state before it was animated by TweenMax. I was testing with tween.invalidate() .. but I was unsure if this was correct? Thank you for any help!
  8. Hi, Is possible to invalidate just a single property?. I have a timeline and after the first execution it stores the initialization data for future play. The thing is that one of the tweens nested in the timeline could change, because the height property of the target element changes. But if the timeline plays again the height is the original value not the changed one, which causes to look bad. So far I've sorted out like this: tl1 = new TimelineMax({paused:true, onComplete:comp}); tl1 .set(div1, {left:50, height:100}) .to(div1, 1, {left:250}) .to(div1, 1, {height:200}); By putting the set tween it takes the values to what I want, whether is the original value or the changed one. But it would be great to clear just that value. Cheers, Rodrigo.
×
×
  • Create New...