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

Everything posted by GreenSock

  1. Gosh, this error sure sounds like you're using the ES Module files: 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).
  2. 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: https://codepen.io/GreenSock/pen/00d0d94f15f9f3c8e2eb5b8449babaad?editors=0010 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: https://codepen.io/GreenSock/pen/31339d8f0e252e0e87f6ecf4f98f6960?editors=0010 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.
  3. 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.
  4. 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.
  5. No, clip-path is not a feature that all browsers support (that has nothing to do with GSAP): https://caniuse.com/#feat=css-clip-path
  6. 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
  7. 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!
  8. 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!
  9. 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.
  10. Sure, you should be able to import the ES modules from a local directory (doesn't really matter where). in your download zip, you should see a bonus-files-for-npm-users directory - that has all the bonus files. Just drop that somewhere in your project and import accordingly. Does that help?
  11. Glad you sorted out your issue. And I wasn't trying to discourage you from using ScrollMagic at all - I just wanted to be clear that it's not a GreenSock product so these forums may not always have answers for ScrollMagic-related questions, that's all. But I hear great things about ScrollMagic and plenty of people love using with GSAP. I don't have an alternate recommendation right now Happy tweening!
  12. Welcome to the forums, @Pradeep KS. It's tough to troubleshoot by just looking at a few snippets of code, but I wonder if maybe you loaded your scripts AFTER your code? Just a guess. I'm also a bit confused about the way you're loading those scripts - I don't recognize that syntax. I'm used, to seeing <script> tags. If you're using a build system (looks like it since you've got node_modules), perhaps you need to import the proper classes? If you're still having trouble, please provide a reduced test case that reproduces the issue so we can take a peek. Also, please keep in mind that ScrollMagic is NOT a GreenSock product and we don't support it.
  13. I wonder if you forgot to load CSSPlugin? Or just load TweenMax because that has it included.
  14. Yep, just to be clear about why this is happening... In order to maximize performance, GSAP caches the transform values after the first time it parses them because typically it's a huge waste to read the computed style again and decompose the matrix() or matrix3d() into the components (x, y, scaleX, rotation, etc.). You can force GSAP to re-parse them by setting parseTransform:true on your tween, but I'd strongly recommend always handling transforms directly through GSAP so that you get maximum performance. It also avoids rotational ambiguities that come from decomposing matrices (that's just the nature of them - it has nothing to do with GSAP) You had a percentage-based translate transform on your element that was set in the CSS, but when the browser reports the computed value it's always as a matrix() or matrix3d() which never contains percentage-based information - it's all converted to px, so GSAP simply cannot know that your intent is to use percentage-based values. This is another reason why it's best to use GSAP for all this because it'll store all of that data for you and keep it crystal clear for all future tweens So to "fix" your old version, you can just set all those values through GSAP (best), or you could simply add parseTransform:true to your tween and put a tl.invalidate() in your click handler so that it tells the timeline to re-initialize things on the next render. Like @ZachSaucier suggested, the simplest, most bullet-proof solution is to just use GSAP for it all instead of mixing CSS and GSAP. Happy tweening!
  15. Without a codepen demo to see the context, it'd difficult to know for sure but typically it's best to just set a perspective on the parent element rather than a transformPerspective on the element itself. I assume you're doing some 3D-related transforms?
  16. I noticed you've got allowEventDefault:true on the Draggable. Have you tried deleting that? I know that when building Draggable, it was a huge nightmare trying to normalize all the browser behavior with click/drags/pointerEvents/mouseEvents/touchEvents because they all have various bugs/quirks/differences. That's one of the reasons we have an onClick handler in Draggable - so you can save yourself from some of these nightmares and let us handle them internally I'm curious why you're trying to avoid using it.
  17. Yeah, nothing is really sticking out to me, other than perhaps the element is getting removed from the DOM mid-tween and those browsers are choking on the getBoundingClientRect() call. Have you tried calling TweenLite.killTweensOf(yourElement) on unmount (or whenever it might be getting deleted)? I don't think anyone else has reported any issues like this, so it seems like a bit of an edge case that's super tough to diagnose blind
  18. Wow, thanks for pointing that out Craig! And we're at over 93,000 total posts, so another milestone is approaching. Pretty cool indeed! I'm super proud of the tone that all the moderators set here. It's truly a unique place on the web, so my hat's off to all the participants. And yes, to the lurkers - dive in, the water is nice and warm. PS: GSAP 3.0 is shaping up very nicely. When released, I'm sure these forums will be even more active
  19. I don't have time to analyze things in-depth, but I did notice that you just nested the "autoKill" incorrectly: //BAD: .to(window, 1, {scrollTo:".footer", autoKill:false, ease: Power0.easeNone}) //GOOD: .to(window, 1, {scrollTo:{y:".footer", autoKill:false}, ease: Power0.easeNone}) It's fine to pass a string like that directly to scrollTo, but if you're defining more values that are scrollTo-specific (in this case "autoKill"), you need to use the object syntax. I suspect this is what was causing the dragging of the scrollbar to kill functionality (doing so killed the tween).
  20. Yeah, and try referencing the plugins somewhere in your code just to prevent your build system from dumping them as a part of its "tree shaking" process. Like: const plugins = [ScrambleTextPlugin, DrawSVGPlugin]; //merely to prevent tree shaking
  21. A few quick comments: Be careful about will-change. https://greensock.com/will-change The invalid morphSVG tween error means you forgot to load MorphSVGPlugin You can try setting CSSPlugin.defaultForce3D to true or false to see if one of those helps (default is "auto").
  22. Welcome to the forums, @Minjong! It looks like your imports are fine, but the problem is that you've got some malformed code, like: //BAD: (there's no such thing) TimelineLite.to(...) //GOOD: var tl = new TimelineLite(); //create a new timeline instance tl.to(...); //then add stuff to it Does that clear things up?
×