Jump to content
GreenSock

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

Search the Community

Showing results for tags 'reverse'.

  • 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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. Hey guys, I'm playing a bit with GSAP to use for my future website. Gonna drop Snapsvg and only use jQuery along with GSAP. I was wondering how I could ease an animation in reverse differently? So let's say anim.play() will use ease:Elastic.easeInOut and the reverse() would use eg. ease:power1.easeOut. Is this possible? Here is a code-axample which I'm currently playing with; var animateThumbs = function() { var $anchors = $( 'div.col-md-4' ).children( 'a' ), ellipse = $($anchors[0]).find( 'ellipse'), duration = .25, ellipseProps = { from: { cy: ellipse.attr('cy'), rx: ellipse.attr('rx'), ry: ellipse.attr('ry') }, to: { cy: -500, rx: 625, ry: 725 } }; //Let's set on every a-element a timeline as method $anchors.each( function(index, elem) { var ellipse = $(elem).find( 'ellipse' ), animateSvgBG= new TimelineMax({repeat: 0, paused: true }); animateSvgBG.fromTo(ellipse, duration, //from { attr: { cy: ellipseProps.from.cy, rx: ellipseProps.from.rx, ry: ellipseProps.from.ry }}, //to { attr: { cy: ellipseProps.to.cy, rx: ellipseProps.to.rx, ry: ellipseProps.to.ry }} ); //animateSvgBG.to(ellipse, 1, { attr: { cy: ellipseProps.from.cy, rx: ellipseProps.from.rx, ry: ellipseProps.from.ry }}, "fadeOut"); //labelsArray = animateSvgBG.getLabelsArray(); //console.info(labelsArray); elem.animate = animateSvgBG; }) $anchors.on({ mouseenter: function(event) { // from "fadeIn" to "fadeOut" //TweenMax.fromTo(animateSvgBG, duration, {time:labelsArray[0].time}, {time:labelsArray[1].time}); //console.info( "animateSvgBg: " + animateSvgBG, " labelsArray[0].time: " + labelsArray[0].time, " labelsArray[1].time: " + labelsArray[1].time ); this.animate.play(); }, mouseleave: function(event) { // nfrom "fadeOut" to "fadeIn" //TweenMax.fromTo(animateSvgBG, duration, {time:labelsArray[1].time, ease:Ease.easeOut}, {time:labelsArray[0].time}); this.animate.reverse(); } }) }
  2. Hi Guys! I hope this post finds you well. I am writting because i am using timelinemax in order to create an animation that has 3 stops in between in which the user has the ability to either continue to the next point or go back. All my tweens are working well, and now is time to add the pauses. I thought about just adding them to the onComplete and calling it a day. Yet when reversing they were not firing... This made me find out about onReverseComplete which worked like a charm expect that when going backwards the onComplete was firing as well pausing my animation before it could even get started. After a second click on the back button, the animation started playing backwards correctly. Bceause of this effect, i decided to try adding a callback but to my surprise i ran into the same problem. Then i went to the docs and found information about the addPause function. Including this piece of text: "Remember, the virtual playhead moves to a new position on each tick (frame) of the core timing mechanism, so it is possible, for example for it to be at 0.99 and then the next render happens at 1.01, so if your callback was at exactly 1 second, the playhead would (in this example) move slightly past where you wanted to pause. Then, if you reverse(), it would run into that callback again and get paused almost immediately. However, if you use the addPause() method, it will calibrate things so that when the callback is hit, it'll move the playhead back to EXACTLY where it should be. Thus, if you reverse() it won't run into the same callback again." This is what is happening to me currently and thought this was the right fix. The problem now is that when i add the pauses this way: this.timeline.add( TweenMax.to(this.map.mapPoint,0.5,{frame:this.map.mapPoint.totalFrames, ease:Linear.easeNone}) ); this.timeline.add( TweenMax.from(this.map.line1,1,{scaleX:0, ease:Quint.easeInOut})); // this.timeline.add( TweenMax.to(this.map,1,{x:2286,y:-157, ease:Quint.easeInOut}) ); this.timeline.addPause() // this.timeline.add( TweenMax.to(this.map,15,{x:-57,y:778, ease:SlowMo.ease.config(0.9,0.3)}) ); The animations pauses correctly, but if i try to use resume() or play(). The animation doesnt move at all. Only works at this point if i call reverse() Any ideas what might be happening? thanks a ton alex
  3. First time posting, long time reader! Thank you so much for everything you have accomplished here your help over the years has been priceless! SO.... i have a path and i have objects that animate along that path. Sometimes the objects come in from the right and leave to the left other times they come into from the left and leave from the right or right right or left left. I have two basic timelines that come in from either direction. So if timeline1 moves the objects into position from the right. timeline2 would move the same objects in from the the left. And I am attempting to just reverse them if needed. The problem i am facing is that if a timeline has not been played it will no reverse. So if timeline1 moves objects into place from one direction, timeline2 in reverse would move those objects in the other direction. So i tried changing its currentProgress to be equal to 1 so that it will know hey i'm at the end so i can reverse. But it still comes out undefined. Now if i run all my timelines at least once then it works with no problem but i find that there is an issue at first. Please let me know if this made sense. I could try diagrams next maybe. Thanks!!!!!!!!
  4. Howdy internet, I was wondering if there was a way to set a different duration for the .play() and .reverse() animations. I tried to use a function instead of a value, but according to my console, it's only called once, so that value is stored in memory... Thanks!
  5. Hi, I am trying to animate div with timeline max. I am following this procedure : - loop for total div elements with jquery's each - create tween for each div element with tweenmax - on complete of tweenmax reverse it - push tweenmax to tweens_array - add tweens_array to timeline max - on complete of timelinemax reverse it Problem : div is not tweening reverse it will come directly to origional position. here is this source code for refrence : CSS : div,body{ margin: 0; padding: 0; } .container{ position: absolute; height: 100px; width: 100%; top: 150px; } .column{ float: left; background-color: #00ffcc; height: 100%; width: 30px; margin-left:10px; border-radius: 5px; text-align: center; } HTML : <div class="container"> <div class="column column1">1</div> <div class="column column2">2</div> <div class="column column3">3</div> <div class="column column4">4</div> <div class="column column5">5</div> <div class="column column6">6</div> <div class="column column7">7</div> <div class="column column8">8</div> <div class="column column9">9</div> <div class="column column10">10</div> <div class="column column11">11</div> <div class="column column12">12</div> <div class="column column13">13</div> <div class="column column14">14</div> <div class="column column15">15</div> <div class="column column16">16</div> <div class="column column17">17</div> <div class="column column18">18</div> <div class="column column19">19</div> <div class="column column20">20</div> <div class="column column21">21</div> </div> JS : var tl = new TimelineMax(); var delayTween = 0.1; var tweenArr = []; $(".column").each(function () { tweenArr.push( TweenMax.to( this, 1, { y:-60, ease:"linear", onComplete:function () { this.reverse(); } } ) ); }); tl.add( tweenArr, '+=0', "sequance", delayTween ); tl.vars = { onComplete:function () { tl.reverse(); } } Any help would be greatly appreciated, Thanks in advance.
  6. Hi guys, again. This time: i have five movieclips (with different instance names, but same tween) and i am tweening them with a for loop. I need each movieclip to make a slight move onrollover (relatively to its position) , while returning back to its original position on onrollout. The way i tried to solve it, was setting exactly the same amount of pixels to the rollout, but with oposite value. The problem comes when i rollout the movieclip, BEFORE it completes the movement. I have attached a video for you to see it. and here is the code: for (i=0; i<links_menu.length; i++) { links_menu.onRollOver = function (){ TweenMax.to(this, 1, {_x:"19", _y:"-4.75"})}; links_menu.onRollOut = function (){ TweenMax.to(this, 1, {_x:"-19", _y:"4.75"})}; }; I also tried this, but didn't worked out, and i don't understund why: for (i=0; i<links_menu.length; i++) { links_menu.onRollOver = function (){ TweenMax.to(this, 1, {_x:"19", _y:"-4.75"})}; links_menu.onRollOut = function (){ var rolloutx = "this._x"; // rel.position of on rollout var rollouty = "this._y"; // rel. position of y on rollout TweenMax.to(this, 1, {_x:("this._x")-("this._x"), _y:("this._y")-("this._y"))})}; }; // _x = the relative position of x when i roll out minus same number. // _y = the relative position of y when i roll out minus same number. //Logically it should work but it doesn't was wondering if there is such thing as a reverse function on rollout? mov.zip
  7. Frans

    disable reverse

    Hello, i am new to superscrollorama. I want to disable an animation when you scroll up. I found the code on the website but it doesn't work for me: The 5th parameter is reverse, which you can use to disable reverse animation. controller.addTween('#fade', TweenMax.from($('#fade'),.5,{ css:{opacity:0}}), 200, false); // prevent backwards animation of the element What am i doing wrong? Frans
  8. I've been struggling with an issue for some time now and have exhausted all suggestions of a fix. I play and reverse an animation a few times and then suddenly the animation starts reversing to a certain point and stops. As I continue to run and reverse the animation, less and less of the full animation is reversed (presumably because the start point is shifting out). Tracking it in Chrome's "Inspect Element" I can see the CSS properties are left at a point indicating incomplete reversal. I have tried: tl.set(objectToAnimate, {clearProps:"all"}); tl.clear(); tl.kill(); Also tried deleting the _gsTransform that attaches to the object being animated delete objectToAnimate._gsTransform; ......but nothing works. Is this a bug? Example at http://jsbin.com/irixuk/72/edit To replicate bug click blue box, close and repeat until animation fails to return to start (after 3-5 plays usually).
  9. Hi, Probably very simple but i cant seem to get my head around timelineMax. I have a movieclip (spinY_mc) that i want to play backwards when i click a back button (back_mc). back_mc has various conditions and is done as a Click event. Can you help?
  10. Hello! First of all, I know that this is not necessarily the right place to be looking for answers regarding SuperScrollorama since it's completely separate. But it does seem as though this is a good place to at least ask the question. I'm trying to design a single-page site, and have run into a problem. The effect I'm aiming for is: A fixed, centered <ul> navigation at the top of the page. On scrolling down, the menu will break apart between the 3rd and 4th <li> and create a space of 250px, into which the logo will scroll (and shrink) and then remain for the duration. I'm achieving the effect by adding a margin-right to the third <li> element, and this is what i want to be animated against the scroll position. However, although the page loads correctly, with the margin-right at 0, as soon as the page starts to scroll the margin-right jumps straight to a number around 180px, before scrolling smoothly for the duration that I need it to. Then, on scrolling up, it animates smoothly but only returns to the random 180px value instead of 0. Here's a JSfiddle: http://jsfiddle.net/aTz4X/5/ It's just that initial jump that's the problem. I've been trying to figure it out for days, but can't get to the bottom of it. Any help or pointers would be much appreciated. Rob
  11. Hello! I'm building up my new Portfolio with your Engine but I have a big problem. It's basically a spinning 3D Cube. I made a a Timeline for each "Spin" and i just Start and Reverse those Timelines. But sometimes when i press the reverse button everything gets messed up. (Attechment). The Timeline im reversing should animate 2 divs. but only one div works correctly. You can try it out yourself at http://deesr.com/ . Just go to the second page, open a few "Colors" and then go back to first page. In some cases it works, but sometimes it doesn't, what makes it even harder to fix.
  12. Hi. I declare var cacTimeline; as global variable. I then use it like this in function1 for example : function1 () { cacTimeline = new TimelineMax(); cacTimeline.to($linePath,0.5,{height:300}); ...... } I then want to reverse it in function2 and have a onReverseComplete or some callback at the end. But for the sake of my app , I have to append this callback in function2 , not in the object declaration. function2 () { cacTimeline.addCallback(callback_function_name,0); cacTimeline.reverse(); } Fires the callback_function_name twice. One at the start of the tween , one at the end of the sequence. function2 () { cacTimeline.addCallback(callback_function_name,cacTimeline.totalDuration()); cacTimeline.reverse(); } callback_function_name never fires. Can anyone help me. I'm new to this , maybe there is a better solution for this.
  13. Hello I need create a simple infinite scroll animation with text I upload the files for example, I am trying with yoyo but no not achieve the same result I am using AS2 Thanks for help blerlogopase.zip
  14. Hi folks! Iam making a platform game, where the Hero can get extra time for picking up some jewel! For time tracking i'm using TweenMax. Is there any way, to pause tween, and skip back(reverse) let's say with 5 seconds? Any help appreciated! tnx daniel
  15. The following animated perfectly. All is well. But when I go to REVERSE() the timeline, the ball fades out, but never back in, and continues back to original starting spot at opacity = 0. Why is this? Thanks -Thomas function fadeIn(obj){ var tl = new TimelineMax(); tl.append(TweenMax.to(obj, duration, {css:{opacity:1}, ease:Linear.easeNone})); return tl; } function fadeOut(obj){ var tl = new TimelineMax(); tl.append(TweenMax.to(obj, duration, {css:{opacity:0}, ease:Linear.easeNone})); return tl; } var ball = document.getElementById('ball2'); var tl = new TimelineMax({}); tl.append(TweenLite.from(ball, 12, {css:{marginLeft:900},delay:1})); tl.append(fadeOut(ball)); tl.append(fadeIn(ball));
  16. I have two time lines which I would like to play simultaneously. First one plays forward and second one plays in reverse. I can not figure out how to reverse my time line. They both are playing forward. Here is the code I try to implement to reverse the timeline: var movingLights2_timeLine:TimelineMax = new TimelineMax({currentProgress:1 repeat:-1, yoyo:true, timeScale: .5, reverse:true});
  17. Is there a way to have reverse appended to the timeline? I'm trying to make a typewriter effect, so when the letters are typed out, it'll reverse it, and type a new sentence. Kind of like you're backspacing the sentence.
  18. how can i do reverse from specific scale/time/point in my timeline?
×