Jump to content

Search the Community

Showing results for tags 'reverse()'.

  • 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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 6 results

  1. Hi, first of all i want to thank you for GSAP being awesome. Creating my site, i noticed strange behavior. I have complex animation, wchich goes forward/backward depending on wether element is clicked even or odd times. Everythings works pretty well exept for one part. I have svg stars empty inside with clipped rect to animate 'loading' the stars. While rest of animation works back and forth without any issues, here works well for the first time, then each consecutive time looks like there is one more animation interfering with the rest. It,s hard to explain it precisely, due to my limited english, however it's clear in the example i attached . Just click a few time and observe the effect. For demostration purposed, I removed all well-functioning parts of animation.
  2. I'm trying to achieve an animation where the user hovers over a header. On mouseenter the animation should start playing with a pre-defined duration. On mouseleave the animation should reverse with another duration (a much faster one). My problem is that on mouseleave the animation doesn't reverse from where it was left off, it seems to be reversing randomly. If you hover over the title and rapidly hover off you can clearly see what I'm talking about. I tried to set the time of the animation on mouseleave so it keeps tracks of where it was but it doesn't seem to work either.
  3. Hi All, Beginner here. I'm hacking code given to me on this forum by PointC. I need to know how to reverse the scaling/cross-dissolving in my codpen demo: http://codepen.io/pfash/pen/aprmxq ...by clicking on the red box a second time. IOW: you click on the red box once to have it dissolve into the blue box and scale up...and then you click on the red box again and it all goes in reverse. That second part is my question. NOTE: This demo is supposed to have the red box on top of the blue box (so the red color smoothly transitions into blue) but I didn't have time to figure that out for this codepen demo and it's not critical to my question. Another concern: the scaling up (zooming larger) and cross-dissolving is not as smooth as I expected it'd be. You can see the blue box flash a bit. Any ideas why? Thanks much!
  4. Is it possible to reverse a master timeline within GSAP? I know you can reverse a timeline that is not nested. Here's the code: // hide copy content divs const hideCopyContentDivsTl = new TimelineMax() hideCopyContentDivsTl.to(copyContentDivs, 1, { height: 0, width: 0, autoAlpha: 0 }) // shrink copy wrapper div const shrinkCopyWrapperTL = new TimelineMax() shrinkCopyWrapperTL.to(copyWrapperDiv, 1, { width: '2%', height: '4%' }) // fade remove bg and change to white const fadeLargeBgImgTl = new TimelineMax() fadeLargeBgImgTl.to(largeImage, 1, { backgroundColor: "#fff" }) // the master timeline to manage the parts const masterTimeline = new TimelineMax({paused: true}) masterTimeline.add(hideCopyContentDivsTl) .add(shrinkCopyWrapperTL) .add(fadeLargeBgImgTl) // assume that there is a mechanism to change the state of playVideo between true and false if (this.state.playVideo === false) { console.log("should play: ", masterTimeline) masterTimeline.play() } else { console.log("should reverse: ", masterTimeline) masterTimeline.reverse() } I can get it to play forwards, just not in reverse. Do I need to tell the browser where to start in the timeline so that it can play in reverse? http://stackoverflow.com/questions/38440731/greensock-animation-platform-is-it-possible-to-reverse-nested-timelines
  5. Hi am using multiple callbacks onComplete() , .reverse() not working properly for example : var myTween = new TweenMax.to([element1,element2,element3], 0.5 ,{"left" : "0px", "top" : "03x"}).eventCallback("onComplete",function(){ myTween = aboutCircle.empty(200); TweenMax.to([element,element1,element2,element3], 0.5, {"display":"none"}).eventCallback("onComplete",function(){ TweenMax.to(aboutCircle, 0.5 , {rotationY:"+=180", "left" : "0px", "top":"0px","width":"500px","height":"500px"}).eventCallback("onComplete",function(){ }) }) }); i want reverse for it myTween.reverse();
  6. Hey, guys! I'm wondering the best way to setup a somewhat complex situation in which I can control tweens (TweenMax) from multiple timelines (TimelineMax) and/or from timelines and the tweens themselves. This is too involved for a CodePen, but it's likely just conceptual and I'll clarify, further. Here are some givens: I'm using drawSVG, but I think the analogy can apply to any tween. For simplicity, imagine a simple x tween in all cases 5 sets of 5 unique tweens (resulting in 25 unique tweens). need to animate each set in sequentially, but out simultanously. that is, "1,2,3,4,5 in" and "12345 out." The rub is that I want to be able to interrupt at any time. If this is clear, I could end up with "1,2,3 (half way) in", interrupt, and then "123.5 out" That is, 1 and 2 will finish, 3 will be half-way complete, I interrupt, and the 1, 2, and the visible half of three all tween out at the same time. When I was able to animate in and out sequentially, this was super easy because all I had to do was create one timeline and reverse it. Most important to this question, I could interrupt any time and everything looked beautiful. Half-complete still reversed seamlessly. When I was asked to switch to sequential in and simultaneous out, I was no longer able to reverse with a single timeline.reversre() call any time I wanted. For my first test, I created two timelines: sequential and simultaneous. I could easily play sequential in, then set the progress of simultaneous to 1 and reverse that timeline out. All fine, but I was no longer able to interrupt the switches. For example, half way through sequential in, the non-complete timelines would obviously jump to their ends to simultaneously reverse out. Then I wondered if I could create just the 5 sequential timelines but tell each tween to reverse individually (instead of reversing the timeline). And, I would then cleanup using progress() to make sure the timeline was at 0, etc. That is: "group1timeline.play()"; interrupt half way through the 3rd tween; "all group1 tweens reverse"; group1timeline.progress(0). But, I got some odd results. I moved on to thinking about synchronizing progress for each corresponding tween in the sequential and simultaneous timelines, but thought that too complicated. Next I thought about not using TimelineMax at all. . Put each tween of a group in an array and then play and reverse each one. That seems like it will work. How would you recommend setting up 5 sets of tweens so that I could sequentially animate each set in, but interrupt and simultaneously animate only the progress thus far, out simultaneously?