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
  • 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

  1. I'm a little bit stumped on how to make this feature work... I've got cards are flipping the way I'd like them to (Thank you GSAP!) However I want to add the functionality that if a card is already flipped over and the use clicks on another card's 'view' to flip a second card over... I want the first card (that is already flipped over to it's back) to play in reverse (and go back to its starting position) and then the second card can flip over. Much like this: http://www.google.com/landing/now/#cards/ Any help is GREATLY appreciated, as I can't figure out the proper way to achieve this effect. (you can see I get stumped at line 42 of the codepen)
  2. Hi all, New to Greensock so bear with me I've created a sidebar which is hidden, when you mouseenter the sidebar, it fires TimelineMax to animate the sidebar open. When you mouseleave it reverses that timeline. This works great. If you hover over the sidebar, even erratically, it behaves as expected. Now, I have a nav item inside the sidebar which, when clicked, fires another timeline which opens a full page subnav. I set a variable to say this subnav is open so I can keep the sidebar open. So the reverse will only run if the subnav is closed. If you hover the sidebar and click the button (looks like a little bottle) a full page colourful nav will appear. If you keep you cursor over the button, click it again (to close the colourful nav), then mouseleave the sidebar, it reverses as expected. If you... Hover the sidebar click the button mouseleave the sidebar to interact with the colourful nav then go back to the sidebar to click the button again to close the nav THEN mouseleave The sidebar should close but it remains open, the timeline doesn't reverse. All the variables seem correct so I'm stumped! I hope this makes sense, I've tried to explain it as best I can. See the Codepen for the working code. Many thanks!
  3. tween = TweenMax.fromTo(class_name, duration, {top: start_y_percent, left: start_x_percent, scaleX: 0, scaleY: 0, xPercent: -50, yPercent: -50}, {top: end_y_percent, left: end_x_percent, xPercent: -50, yPercent: -50, scaleX: 1, scaleY: 1, onReverseComplete:hide, ease: Elastic.easeOut}).progress(current_progress); Box elastic eases in, but on reverse(), I don't want the elastic ease (just the default ease). I've looked at http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/reverse/, but not sure if possible using reverse(). If not, what's the best way to do this? Thanks. UPDATE: I killed the tween and created a TweenMax.to to reverse the animation (but with some different properties).
  4. Hello and thanks and congratulation for this amazing tool. Newbies here, i only know few basics about javascript/jquery but managed -thanks to the extensive documentation and active community- to do what i wanted to do: animate a menu. However i surely haven't done it the cleanest way possible that's for sure, because i collected informations from topics to topics and melted all possible junk of codes in an experimental mix of javascript/jquery.(Soon MIT Licensed). Here is a codepen, there is missing css style so its not particulary pleasant to watch but this is working: http://codepen.io/Rofizzle/pen/myGyJM So, I ended up using a snippet from a greensock demo, because that was exactly what i wanted, however i have never managed to make the reverse method to work, and use another tween to make stuff go in or out, with statements. Is there any way to clean that code with solid reverse method?
  5. Hi! I have a timeline animation which I would like to reverse, without reversing the last two tweens. In my jsfiddle example http://jsfiddle.net/identitoe/oLpvfqm4/2/ I would like to keep the last two tweens, the margin-top and the background-color and start reversing from the point I added the label. I just don' get it to work. Thank you
  6. Hi Guys, Let's get the niceties out of the way... GSAP is amazing, currently migrating to it from velocity. I've been looking through the forums regarding the topic of onReverseStart and there's a number of posts saying it's unnecessary because you'll be calling reverse() from some method anyway so why not just do what you need there. But I don't understand how that's any different from onStart? It seems a fairly simple use case. In my case I'm animating the transition between an introductory page and some content. This transition is reversible, ie: you can go from the intro to the content and back again. As I switch from one to the other I need to make a couple of tweaks to classes etc, and enable/disable a couple of elements. If there was an onReverseStart callback, I could keep everything clean and simple (weird psudeo code follows): onStart & on ReverseStart shared method - check which way we're going and make updates. onComplete & onReverseComplete shared method - check which way we went and make updates. toggle method - if (inIntro) timeline.play() else timeline.reverse() As there isn't an onReverseStart, the best I can get is: onStart - must be going from intro to content - make changes. onComplete & onReverseComplete shared method - check which way we went and make updates. toggle method - check which way we're going, if it is from content to intro (ie: reverse) make the changes and call reverse(), else call play(). That seems a little messy to me. Also just wanted to clarify something? If I reverse a timeline, that means any easing is reversed as well? Thanks, Adam.
  7. Hello, I am have a simple animation that hides and shows the navigation. I made this into a TimelineMax sequence where on mouseenter it plays the time line, and on mouseleave it reverses the time line. With out setting a timer for 2 seconds, how can I delay the start of the reverse when the user rolls off? Here is what I currently have. var navTL = new TimelineMax(); navTL.to( $navMenu, 2, { alpha : 1, left : 0, ease : Strong.easeOut }, 'start' ) .staggerTo( $navMenu.find( '.top-btn' ), 1, { alpha : 1 }, 0.2, 'start' ); navTL.pause(); $navArea.on( 'mouseenter',function ( e ){ navTL.timeScale( 1 ).play(); } ).on( 'mouseleave', function (){ navTL.timeScale( 3 ).reverse(); } ); I tried adding things like navTL.delay( 2 ); to the mouse leave function And tried adding a repeat delay to the time line its self. But since I am not yoyo-ing that doesn't really come into play. I am looking for a GSAP solution to this. I can make a settimeout function but I don't think that is the cleanest way. Thanks in advance for your help. Jermbo
  8. Hi, let's say we have a tween moving an element from point A to point B. We have repeat = 2 and repeatDelay = 1s. When it plays in forward direction, it goes from A to B and then executes the repeatDelay while staying at point B (the end point of the tween). After the delay, it jumps back to A for the next loop. Ok, when it plays in backward direction, it goes from B to A but then, instead of executing the repeatDelay staying at point A (its end point in that direction), it jumps immediately back to its starting point B, waiting there for the repeatDelay. So it seems to me that the reversed version of the tween is not the symmetric with the forward one. Am I wrong? is there any way - I don't now, maybe some config param - for forcing it to have the same behavior in reversed direction? Here you can find an example of the issue. Just click on the div in order to let it go forward or backward. http://codepen.io/anon/pen/qnxpd
  9. Hello guys, I am not sure if I am asking in the right place. I wanted to know if GreenSock is the right plugin to do what apple is doing like the attached reference. http://www.apple.com/ipad-air/ I am able to play forward with pauses but not in reverse with pauses. However, if I am right at the end of the video I can play in reverse all the way. We tried this using a .mov with h264 compression. Is it because it is a streaming format? How is apple doing this? Thanks all.
  10. hello, I am very new at tweenmax. I made my wheel spin. But I would like my wheel to spin 360 degrees left and after, spin 360 degrees right. and have a yoyo effect where it goes left right left right. var ferris = document.getElementById("ferris-wheel"); TweenMax.to(ferris, 1, { rotation:360, ease:Linear.easeNone } ); TweenMax.to(ferris, 20, { rotation:-360, ease:Linear.easeNone } ); how do i do this?
  11. Hi guys, I have a problem with The TweenMax.killAll(true) method. Here is my example: TweenMax.to(targetQ, 2, { scaleX : 2, scaleY : 2, reversed : true, yoyo : true, repeat : 1, x : targetQ.x + (targetQ.width - 2 * targetQ.width) / 2, y : targetQ.y + (targetQ.height - 2 * targetQ.height), ease : Back.easeOut, onReverseComplete : function onReverseComplete():void { trace("complete this tween ;)"); } } ); If you make a reversed tween, it's never call the onComplete function. The tweenax documentation write this: " onComplete : Function – A function that should be called when the tween has completed. To sense when a tween has reached its starting point again after having been reversed, use onReverseComplete." If I call TweenMax.killAll(true), tween not killed!!!!! As I see, the problem is in the killAll method. Inside this, here's a line: isDC = (a.target == a.vars.onComplete); Unfortunately, if you set a reverse to a tween, onComplete callback ignored! cheers, jax
  12. Is there any way to find out whether an animation is playing in reverse at any given point when yoyo=true and repeat=-1 ? I know there is the method myAnimation.reversed(); but as the docs say: This value is not affected by yoyo repeats
  13. 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(); } }) }
  14. 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
  15. 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!!!!!!!!
  16. 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!
  17. 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.
  18. 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
  19. 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
  20. 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).
  21. 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?
  22. 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
  23. 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.
  24. 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.
  25. 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
×