Jump to content
GreenSock

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

GreenSock last won the day on July 24 2019

GreenSock had the most liked content!

GreenSock

Administrators
  • Posts

    13,198
  • Joined

  • Last visited

  • Days Won

    409

Posts posted by GreenSock

  1. Yep, I think @OSUblake was right on regarding the extra M0,0 command at the end, but I can add some code to MorphSVGPlugin to sense that condition and just throw those values away. 

     

    Thanks for your thoughtful and thorough post, especially the reduced test case :)

    • Like 1
  2. Hey @Jon Pierce. Welcome to the forums! 

     

    By default, GSAP uses requestAnimationFrame which is standard in all browsers (except ancient ones, in which case GSAP falls back to setTimeout()). The whole point of requestAnimationFrame is to ensure that it's perfectly synchronized with screen refreshes. So unless the WebView in the Android app isn't using that (which would be very surprising to me), it should all be synced up nicely. Do you know if the device you're testing on supports requestAnimationFrame? 

     

    Typically when there's jank, it has nothing to do with GSAP specifically because it's so highly optimized and updating its values accounts for a very small portion of the overall load - it's almost always related to graphics rendering in the browser. So, for example, if you're animating 100 SVG elements, GSAP might take up 0.5% of the overall CPU load to do its work, and 99.5% is the browser actually fabricating all the new pixels for the resolution-independent SVG elements, firing events, doing any document reflows, etc. 

     

    You could certainly experiment with actually setting force3D:false just to see if it helps anything. Usually it's best to leave force3D:"auto" or true, but in some rare cases the browser may actually do better with it disabled (Chrome on the Mac currently has a bug that actually can decrease rendering performance with 3D layering enabled). 

     

    Another thing you could experiment with is setting TweenLite.ticker.fps(30) or something to set it to a lower-than-normal value just to see if visually it helps you. I kinda doubt it will, but it's worth a shot. 

    • Like 3
  3. @Antoniopf, you've got a lot going on with various 3rd party tools that could be the source of the problems. We know for sure that GSAP works great in IE11, so it's highly likely that there's some other conflict on that page that's not related to GSAP but it's too difficult to troubleshoot remotely on a live site with so many variables, other libraries, etc. If you can show us a reduced test case where GSAP (alone) isn't working in IE11, we'll jump on that immediately and offer solutions. We definitely want to make sure GSAP is bug-free. 

    • Like 3
  4. 19 minutes ago, stereoS said:

    do you know why it doesn't work with repeat: -1?

     

    It wouldn't be a true "repeat" if it wiped out values and used new ones. But @PointC gave a great solution, and here's another alternative: 

     

    See the Pen 482b8b02df7d5f3b970861163bdb17a0?editors=0010 by GreenSock (@GreenSock) on CodePen

     

    TweenMax.to("#box", 2, {
    	rotation: "+=120",
    	transformOrigin: "50% 50%",
    	onComplete: function() {
    		this.invalidate().delay(2).restart(true);
    	}
    });

    Does that help? 

    • Like 2
  5. Very interesting - it definitely seems Vue-related. If I remove Vue from the equation, it all works as expected. From what I can tell, the issue gets introduced as soon as you load CSSPlugin which enables the "autoCSS" feature, wrapping all the non-protected properties into a css:{} object in the vars (protected ones are things like onComplete, overwrite, etc.). If you set autoCSS:false on your first tween, it seems to resolve things too. I wonder if Vue is somehow swapping things out from underneath GSAP. Very odd indeed. 

    • Like 1
  6. I'm not at all familiar with Vue or what it may be doing to tinker with the GSAP objects, but you mentioned a "shallow" watch for changes and I wonder it something is happening with Vue copying things but only in a shallow way, so that the vars.startAt doesn't actually get properly copied over (deeply)? I'm totally guessing. There isn't any "magic" going on in GSAP - it's relatively straightforward, so any weirdness here sounds like it'd be Vue-related (and again, I'm totally unfamiliar with that). I wish I had a better answer for you. 

  7. Hm, I'm not sure what could be the problem there, @mosk. I'm not aware of anything substantially different about those. I doubt this would help, but have you tried putting ".js" at the end of the import files? Maybe try making sure they're in the correct directory structure, like /vendors/utils/GSDevTools (notice "utils"), and the main TweenLite (and other non-plugin) files one directory up? I'm totally guessing at things here. 

  8. Gosh, this error sure sounds like you're using the ES Module files: 

    Quote

    "export 'default' (imported as 'SplitText') was not found in..."

     

    UMD files don't even use the word "export" with "default". Are you absolutely positive you're using the correct files? One way you can check is to just crack one open and at the top, the ES Module files will have "import" statements as well as "export" statements at the bottom. There should be a "umd" directory inside the "bonus-files-for-npm-users" folder of your download zip - that's where you'll find the UMD files (those won't have "import" at the top, and probably won't have the word "default" anywhere near exports).

     

    Like @Dipscom said, it's definitely best to see a reduced test case that we can use to reproduce the issue.  I really want to help, but feel like my hands are tied a bit (and frankly, I'm not at all familiar with Nuxt). 

  9. You can just call reverse() on any animation, but in order to do that you've got to have a reference to that animation. So you could create a variable (outside your functions) to store the animation reference. But the bigger problems it that the way you built this means that the back buttons will never trigger anything because you have click event handlers on the parent elements, thus those will hijack the clicks. Feel free to add a console.log() inside your back button handlers and you'll see they never fire. 

     

    You could just handle the logic based on click on the whole section like this: 

    See the Pen 00d0d94f15f9f3c8e2eb5b8449babaad?editors=0010 by GreenSock (@GreenSock) on CodePen

     

    But I the danger in that approach is that if someone clicks very quickly, you'll be creating timelines based on inbetween positions, thus when those get reversed, they'll appear to only go part-way back (that's not a problem with GSAP - it's a logic issue in the code). 

     

    So you could pre-compile each of the two timelines and then just flip the direction on each click which ensures that the starting/ending states are locked in properly: 

    See the Pen 31339d8f0e252e0e87f6ecf4f98f6960?editors=0010 by GreenSock (@GreenSock) on CodePen

     

    You could also build the timelines on the fly so that the easing isn't inverted on reverse. Lots of options. 

     

    Anyway, I hope that helps. 

    • Like 5
  10. Well, there are a few challenges with clip-path:

    • Some browsers just don't support it. 
    • The kinds of values it can accommodate vary widely, and it'd take a ton of code to figure out how to smoothly animate, for example, from a circle() to a polygon() or inset(). Add to that the values inside each of those can be various units (px, %, etc.) and it's just a mess. 

    The next release of GSAP can do basic stuff where the types of shapes, numbers of points, and units match between the starting and ending shapes, but it can't magically add browser support or animate between totally different shapes/units. 

    • Like 4
  11. It's super difficult to troubleshoot by just looking at little snippets of code - I wonder if you just need to add type="module" on your <script> tag(?) Typically script tags are NOT treated as modules (thus can't understand imports) in browsers. 

  12. Hm, if you're using a build system like that, I assume it'd be best to use the ES module files rather than the minified files. ScrollToPlugin is in the NPM package, FYI. So you should be able to just npm install gsap and then: 

    import ScrollToPlugin from "gsap/ScrollToPlugin.js"
    
    const plugins = [ScrollToPlugin]; //just to reference it so that tree shaking doesn't dump it in your build process

     

    • Like 2
  13. Thanks for asking about this, @Laborious. The demand for ActionScript-based solutions drastically dropped to almost zero, so we're 100% focused on where the vast majority of our users need our help - in the world of JS/HTML/CSS. I wish we had the resources to devote attention in multiple places like that, but unfortunately we don't. You're of course welcome to keep using the ActionScript tools we developed. As far as I know, they work great. 

     

    Happy tweening!

  14. Glad you found a solution. If your goal is to get rid of any transforms, you don't have to pass in that long matrix3d() value. You could do any of these:

     

    tl.set('.text2__hidden', { transform:"none"});
    //or
    tl.set('.text2__hidden', { clearProps:"transform" });
    //or explicitly reset things:
    tl.set('.text2__hidden', { x:0, y:0, z:0, scale:1, rotation:0, skewX:0, skewY:0, rotationX:0, rotationY:0 });
    

     

    Happy tweening!

    • Like 3
    • Thanks 1
  15. Can you describe what you mean by "native events"? Like "touchstart"? If so, yes, it's tapping into normal browser events - it's not using some 3rd party library. There are zero dependencies outside of GreenSock tools. If by "native events" you're talking about native development on phones or something like that, no, this is pure JS that runs in a browser and is tapping into browser events. 

     

    I'm not aware of any examples or helpers for tests, no, sorry. 

    • Like 1
×