Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by mango-nyc

  1. Thanks @OSUblake, this works fine using the normal NPM install, and using the "transpile" in build. This is even cleaner for me than using the /dist/. Thanks again for the great solution.
  2. Thanks! That worked perfectly. Really appreciate it.
  3. I'm having a problem getting GSAP3 PlugIns to work in a Nuxt(2.10.2) project. To make sure it wasn't something else I had installed within my existing project, I created a new base nuxt project and I installed GSAP with the .tgz file from the "npm-install-this" directory. If I add the the base gsap as in import { gsap } from "gsap"; it works fine, I ran a small tween to test. However, when I try to introduce a plugin, as suggested, and refresh the browser- not even using the plugin, just importing it. import { PixiPlugin } from "gsap/PixiPlugin.js"; gsap.registerPlugin(PixiPlugin); I get an syntax error stating "Unexpected token export" (pic attached) In my troubleshooting, I went back and created a base Vue CLI(v 4.0.5) Project to test, and installed GSAP with the same methods suggested on the site here, and using the same code as above, and everything works fine. I imported the CustomWiggle plugin and it works fine. So I believe the issue is with Nuxt somehow. I do need to use a Custom Plugin, and I've already started to rewrite my animation in the new format, so I'd hate to go backwards if not necessary. Thanks
  4. Hi Carl, I have looked at the pen with the wiggle demo, and I've watched the video, and I'll still stick with my point that its not intuitive for me as an ease. Here's my logic- so maybe when you see how I picture it you can explain it so I get it. Say I'm going to throw a ball, I want to throw it 400px over 1sec. I would set up a TweenMax.to(mything, 1, {x:400}) which would work fine Now I want to control how it is delivered over that 400px distance and 1 sec time. This is where the "ease" comes in. Let me point you to the GSAP easing demo for exhibit 1- https://greensock.com/jump-start-js#easing Every one of these examples, is working off a tween that sets the left: to 400px. In every one of the ease examples I tried, the GSAPSuperMan icon, moves 400px to the left. Not one of those easing examples altered the end point of the icon, its always 400 px to the left, which is where it should be since that what I told the tween to do! Don't get me wrong, I love the wiggle, but maybe it shouldn't be called an ease, because as I think I explained here, it doesn't behave as all the other base eases do. Thanks for taking the time to explain this. Mango
  5. I'm playing around with the new eases, Custom Bounce and Custom Wiggle. Im comparing two identical tweens, except for the easing tl.to(blue, 1, {top:400, ease:"myWiggle"},"start"); with this the item would move down 600px from the top and "stay there"- just a normal tween tl.to(green, 1, {top:400, ease:Power2.easeIn},"start"); this wiggle tween works fine- but the item ends up back in its original position, I am confused by this behavior. I added a third tween using from and that ends up on top as it should, tl.from(red, 1, {top:400, ease:Power2.easeIn},"start"); why does this easing function change the ending position property? I'm not used to that, and not sure how to plan for it. Thanks, Chris
  6. Thanks Jonathan and everyone else, that's really helpful. I've been playing around with these to better understand how they work in different situations.
  7. Thanks Diaco, That's very helpful to know, and thanks for the explanations of the other methods.
  8. Thanks PointC, That would work. I was actually looking for a solution within the Greensock API if that is possible. Just curious how I would use kill( ); or clear( ); or clearProps( ); for something like this, or it might just be that they don't work the way I imagine. Thanks
  9. I'm trying to kill a tween after it plays- mainly because the <div> flies off the page- but it's still there, as you can scroll to the right and it is still there. I would like both divs to disappear after animating through the timeline. I know there is a "clear()" as well, or maybe I should be using "clearProps" Thanks
  10. I'm using CSSPlugin.defaultTransformPerspective = 440; in an animation. the animation itself works fine, but it is not recognizing my change in perspective. Does anyone know if this works in IE8? Thanks