Jump to content
GreenSock

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

OSUblake last won the day on August 15 2019

OSUblake had the most liked content!

OSUblake

Administrators
  • Posts

    4,260
  • Joined

  • Last visited

  • Days Won

    439

Everything posted by OSUblake

  1. For that to work, you might have to import the umd version of TweenMax. But that's just a guess. Is there any particular need for that library? I would just use regular promises and async/await.
  2. Nobody said it did. The OP posted code that clearly showed the () as the problem. The code you posted doesn't. My guess is that you might have CSS transitions on some of those elements, or some of your event handlers are being called more than once for the same action.
  3. For the tween in close_main_menu to run, something has to call it first. Find out what is calling it. Functions don't run on their own (technically they can, but you're not doing that). If you think the problem is with GSAP, then comment out all your GSAP code, replace it with jQuery .css() code if needed, and run your solution again. If the problem still persists, it's safe to assume that it has nothing to with GSAP.
  4. It's probably more common than you think. Everything you described sounds pretty normal to me. If things get too unwieldy for you, you may want to consider using a framework like React, Vue, Angular, etc. Frameworks simplify a lot of the tedious work involved with managing state.
  5. What language do you speak? If you want to kill something by class, and you're using jQuery, then do this. $(".kill-these-boxes").each(function(index, element) { Draggable.get(element).kill(); });
  6. So replace this... Draggable.get(".box").kill(); With this... this.kill();
  7. You should use actual elements instead of selectors. The box class represents 12 different elements. If you want to kill something in your hit test, simply kill it. this.kill();
  8. It's very easy to do, but you need to show us with a demo how you are getting those cards to kill. Deleting a class from an element is a horrible solution. That can lead to poor performance and memory leaks.
  9. That's not at all what I was suggesting. I made that demo to show how to use non-pixel units for transforms. Using em, rem or anything other type of unit would work exactly the same. I think you might be missing the forest for the trees here. The way GSAP handles transforms is the one of the biggest selling points for a lot of people, but I'll let @GreenSock know how you feel about special units.
  10. It's not ridiculous. There are technical reasons for that behavior. For example, how you would specify em units for a 3d matrix? https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d If you want to use relative units, then consider using CSS vars instead. An example using vh and vw. https://codepen.io/osublake/pen/OvbqXL
  11. Yes, it's called only once. For stagger you need to use cycle. Check out the docs for cycle... (at the bottom) https://greensock.com/docs/TimelineMax/staggerTo And this... https://greensock.com/cycle Also, be sure to check out the learning section. https://greensock.com/learning
  12. I think this is a better demo. https://codepen.io/osublake/pen/veyxyQ
  13. Actually, I don't know what you're giving it because you didn't post any code. A really simple test to see what you're giving it. console.log(typeof (loadContent(activeClass.getAttribute("value")))); What does that print out? My spidey-sense tells me it's going to say "undefined" instead of "function". Again, this has nothing to do with GSAP. It's how pretty much every programming language works. This calls loadContent immediately, and becomes whatever calling loadContent returns. If it returns nothing, it's undefined. loadContent(activeClass.getAttribute("value")) This is an anonymous function and will be called later. function() { loadContent(activeClass.getAttribute("value")) } To summarize, you're giving it the result of a function, and not the function itself.
  14. You're calling the loadContent function immediately that way. You're basically doing this. loadContent(activeClass.getAttribute("value")); t1.add(undefined); That's how JavaScript works. It has nothing to do with GSAP.
  15. OSUblake

    Width Calc

    Interesting site. I'm a little shocked at the Republic of Samsung, which has the fastest the internet in the world. 12.52% ? I mistakenly thought Republic of Korea meant North Korea at first, but then I remembered they don't have internet over there. Look at all those problems Edge 76 fixes ?
  16. Please provide a demo whenever you have a question. It's very hard to understand animation related questions without seeing it. First, I would never animate left and top. It's much better to use x and y instead. I think you want to use a function based value. https://greensock.com/function-based
  17. OSUblake

    Width Calc

    Speak of the devil. An Edge preview is out for older versions of Windows. Spread the word so we can finally retire IE and make @Visual-Q happy. https://blogs.windows.com/msedgedev/2019/06/19/introducing-microsoft-edge-preview-builds-for-windows-7-windows-8-and-windows-8-1/
  18. I think what you might be looking for is some type of stagger e.g. staggerFrom, staggerFromTo, staggerTo. https://greensock.com/docs/TimelineMax/staggerTo() https://codepen.io/osublake/pen/RzKdGa
  19. wavify is not a GSAP product. https://github.com/peacepostman/wavify
  20. Please don't ask something else by editing your original comment. We don't get notifications for that. Just create a new response. Here's something similar to what Mikel showed. You will need to fix the layering though. Slide 1 will always be underneath slide 5. https://codepen.io/osublake/pen/KjaxMj
  21. @Shrug ¯\_(ツ)_/¯ nailed it! One of the best posts on this forum ever. ? That Angular flowchart article does a great job showing the complexity of a project like this. A good resource for source code that does flowchart type stuff with SVG is Joint.js. If I remember correctly, that's where I learned how to do Bezier curve between the connections. https://www.jointjs.com/opensource
  22. Haha. I get a kick out of watching people demand free stuff, and this "cultural thing" comment definitely takes the cake. 10/10 This is why we can't have nice things.
  23. Sure, Vue should work just fine. I just said React because that's what the OP said, but any framework that simplifies building data-driven interfaces should be fine e.g. React, Vue, Angular, Svelte, LitElemet, etc.
  24. Isn't already doing that? The first slide starts out with an opacity of 0 and then animates to an opacity of 1. So at the end of slide 5, everything gets reset to an opacity of 0. If you want to replay the timeline from a different starting point, you can use a technique like this. And if you trying to create dynamic animations, this is a really good article. https://css-tricks.com/writing-smarter-animation-code/
×