Jump to content
Search Community

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


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 15 results

  1. Greetings! To replicate my problem, I created this simple codepen. I can't figure it out😵. All I want is: click on the 'link' -> menu animation reverses -> 'container' turns red. This is where the onComplete comes in; the sequence is important for just one reason, the 'container' turning red is actually going to be the destination of the link or simply speaking, the window.location. Basically, the menu will close like it opened and then the browser can refresh...but because I can't get the onComplete to work, the brower refreshes while truncating the animation.
  2. Hello ! I'm aware this is probably an easily fixable mistake, but I'm still very new to web development, especially using gsap. Basically I have a navbar that I want to open and close with onClick() on the same button in React. I tried following multiples tutorials and forum posts, but I am still struggling to make it work like I want it to. I'd appreciate any help, tips or answers. Thank you in advance for your time ! (I also don't really use codepen but I am more than willing to try and use it, if it's of use for you) function Navbar() { const [navbarIsOpen, setNavbarIsOpen] = useState(false); function NavbarAnimate() { const tl = gsap.timeline({ reversed: navbarIsOpen, }) tl.fromTo(".navbar-link", { x:-400, opacity:0 },{ x:0, opacity:1, stagger:-0.02 }) tl.fromTo("#navbar", { backgroundColor: "rgb(12, 17, 23, 0.0)" },{ backgroundColor: "rgb(12, 17, 23, 0.8)" }) tl.reversed() ? tl.play() : tl.reverse() } And here is the onClick() I use on my button : <i className="..." onClick={() => { setNavbarIsOpen(!navbarIsOpen); NavbarAnimate(); }}/> Thank you again for taking the time to check out my problem, and sorry if this is a redundant and recurring mistake ! (Excuse my english as I'm not a native speaker)
  3. Hi there, New here (also new with gsap/react); I have made a side bar that slides out from the right side, I got the slide in animation to work but can't use .reverse() to reverse that animation. It immediately resets back to xPercent: 100 , instead of animating. Anyone here able to give me any pointers on how I should proceed? Small code snippet: const [menuOpen, setMenuOpen] = useState<boolean>(false); const [toggle, setToggle] = useState<boolean>(false); const handleToggle = () => { setToggle(!toggle); setMenuOpen(prev => !prev); }; const tl = gsap.timeline({ paused: true }); useEffect(() => { tl.fromTo('.hamburger__overlay', { xPercent: 100, duration: 1, }, { xPercent: 0, duration: 1, } ).reverse() tl.reversed(!toggle); }); (Dont mind the styling it's just a quick demo ) CodeSandbox link: https://codesandbox.io/s/sidebar-y45kf1
  4. I have question, I wanted reverse animation "showMenuList"(this is pink background), but this not working, where is mistake? I tried many methods but I failed, pls help
  5. I am integrating simple gsap animations into my React application. I can trigger a animation.play() fn on onMouseEnter, but the animation.reverse() fn is not working. Here's my set up: const hoverScaleAnimation = ( ref: MutableRefObject<HTMLDivElement | null> ) => { return gsap.to(ref.current, { scale: 1.05 }); }; const onEnter = (ref: MutableRefObject<HTMLDivElement | null>) => { hoverScaleAnimation(ref).play(); }; const onLeave = (ref: MutableRefObject<HTMLDivElement | null>) => { hoverScaleAnimation(ref).reverse(); }; Originally I was just triggering new gsap.to animations in the hover functions, but I thought this would be cleaner/less need to calculate how to scale and de-scale. I am following these react & gsap guidelines from greensock, and tried to use reverse() in line with the recommendations here and here. Code sandbox
  6. Hello I'm new to GSAP animation. I add animation with jQuery it's working for the first time if you click on the " Green button " in the top right corner. I need to make the animation reverse also but when it's complete animation does not work second time. Please help Thanks.
  7. Hey legends! Thanks for all the amazing work y'all do. Absolutely loving the GSAP journey. I have the following challenge: - I'm trying to create a form that always opens on page 1. - Once open, the user can then click back and forth between the pages - If they close the form from page 2 and then reopen, it opens on page 1 again. - The page section animation has a matchmedia associated with it as well (thanks to Blake!) I've got reduced test case, which almost works. I've built 2 timelines (1 to open the form and 1 to switch pages). The problem lies somewhere in my approach/logic. After closing the form from page 2 and reopening it, it successfully opens on page 1, because I’m using onComplete tl.seek(0).reverse(). HOWEVER, once reopened, the click event to swap pages does not work on the first click and requires the user to click "next" again to switch pages. My goal is to get it to swap pages on the first click. Hopefully that makes sense. Any help on how to approach/fix this would be greatly appreciated Much respect
  8. So, in the Codepen we have a fairly simple animation. On click of the button, we animate the <header> and <nav> elements in, and click it again, we animate them out. It's a toggle button. However, on mobile, we don't want to run the animation but instead want things to appear instantly. We have achieved this using calls to progress(0) or progress(1), however, we've noticed that if you first toggle the animation on desktop, and then go to mobile, and toggle it again, that without the calls to tl.reversed(false) or tl.reversed(true), the animation still tries to animate and doesn't work correctly. Does anybody have any ideas why adding those lines would make it work as I would expect it? What am I missing? To reproduce: On desktop, or anything matching the media query in the Pen (1000px), click the 'Play animation' button, then click it again to hide the animation. Reduce your screen size down to trigger the mobile code, and again, toggle the 'Play animation' button. Note: the code in the Codepen works, you'll need to remove calls to tl.reversed() on lines 18 and 21 to see the issue. Any help would be much appreciated!
  9. Hi, guys. I needed to create animation like this (in principle): 1. animate rectangle in few steps (=in timeline) 2. when finished, run animation BACKWARDS - 2x faster. But this part is only small part of complex timeline. I tried to achieve this effect by .reverse() method - in two ways: 1) First, I put .add(t2) followed by .add(t2.reverse()) into one timeline. I found out that .add(t2.reverse()) overwrite previous .add(t2) - if I understand this behavior well. However I didn't get what I wanted. This example is represented by blue square in CodePen. 2) So I tried another way - I used onComplete parameter where I called this.reverse(). I didn't expect to get the result that I got. When onComplete is called, red square jumps to initial state without any animation. I'm little bit confused because when I use only one timeline - without calling timeline in timeline as in example - everything works well. Can anybody please tell me what I did wrong and show me better approach? Thank you very much in advance. Karpec
  10. 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.
  11. 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.
  12. 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!
  13. 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
  14. 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();
  15. 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?
  • Create New...