Search the Community
Showing results for tags 'replace'.
Found 3 results
-
Dear All, Let me say that this is post I posted on the AS3/Flash forum but I guess the same principles apply here as well. I will just 'convert' the answer/logic to AS3 code if possible. First let me thank you for any help you can provide and let me explain what the situation is like: I have a number of elements/symbols/bitmaps that I set up on my flash stage (there can be as many as 30 elements) I place the first 5 on stage one under another and the rest outside the stage, on top, so I create the rolling effect. I have an array that I save all the element names in so I know which element is next etc. Currently I construct the spin using Timelinemax and I spin it User sees the first 5 elements and then it spins until the last 5 elements which I bounce a bit on finish ( I will provide the AS3 code after) Quote Here is when I need YOUR help. The user will be able to press a STOP button. Meaning I would like to shorten the animation in this way: Let's say the number of elements is 30. And the user presses STOP when the animation is showing elements 10-15. I want AS3 to insert at elements 16-20 my ORIGINAL last 5 elements (so basically elements 26-30). So the animation remains smooth and it stops at the same elements as it would stop if the user has not pressed STOP Basically I would like to shorten the animation strip and replace the last 5 elements to match my original 5 elements. I do not want to jump to the end of the 30 element animation because then the elements on stage (10-15) will change to elements #20-25 and the user will see this. In a more visual way, to understand better: My original strip is 1,2,3,4,5,...,26,27,28,29,30 Strip starts animating User presses STOP when on stage you see elements 10,11,12,13,14,15 Animation now how to reconstruct the strip like this: 1,2,3,4,...,15,26,27,28,29,30 So after element 15, it will be element 26 and animation will get ready to stop I hope I made the problem clear, it has been bugging me a lot lately to find a solution and I hope someone can help me from this forum. If you need more information please let me know Thank you again. -
Hi, Is that possible to change target of an existing tween (without recreating it like here)? Or clone the tween or timeline with the current var-s and the new targets? It's is important to use the same tween because it can contain some randomly generated var-s which aren't stored anywhere else. I'm thinking on something like: var animation = TweenMax.to(nodeFirst, 1, {x: Math.random()}) function duringTheAnimation() { time = animation.time() animation.invalidate() magicallyReplaceTargets(animation, nodeFirst, nodeSecond) animation.restart() animation.time(time) } I'm experimenting with a tool to use React and GSAP together. The goal is to let React to rerender any time it wants during the animations while GSAP can directly animate the DOM nodes (not messing with the React component state). It's going well so far, but it would be great to solve the case when the component remount the targeted element.
-
I am trying to animate back and forth between two css classes and I'm having some issues right now I have two classes "contracted" and "expanded: .button{ border: 5px #000 solid; } .contracted{ width:100px; height:100px; background-color:green; } .expanded { width:200px; height:200px; background-color:red; } And im trying to switch between them with: $( ".button" ).click(function() { TweenMax.to(".contracted",2,{css:{className:"+=expanded"}}).set(".contracted",{delay:5,css:{className:"-=contracted"}}); TweenMax.to(".expanded",2,{css:{className:"+=contracted"}}).set(".expanded",{delay:5,css:{className:"-=expanded"}}); }); http://codepen.io/anon/pen/vzayE And it will tween from "contracted" to "expanded"... but not vice-versa... Is there a proper way to switch classes?
