Jump to content

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!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. You can get viewport size whenever you want. It's simply window.innerWidth. If you don't have the window object, then your code is not running inside a browser. Make a very simple demo, and someone can show you.
  2. Yeah, there's no way to avoid that as the browser does it automatically.
  3. My demo shows that the browser is collapsing your white space. The text inside the copy_2 div isn't being split apart by GSAP. If you want spaces, then use   https://codepen.io/osublake/pen/OeqXaZ
  4. It looks exactly like your original text. At least in Chrome. I didn't check other browsers. https://codepen.io/osublake/pen/JQzXVQ
  5. Try splitting it into words... type: "words,lines" and if needed, chars. type: "chars,words,lines"
  6. I have to ask about this. Cont = { val: 0000000000 }; Are you expecting the output to contain all those 0s, kind of like this? 0000000000 0000000001 0000000002 0000000003 ... 1710007692 If so, that won't work for several reasons. First, 0000000000 will evaluate to 0, so 0 will be the starting number. Second, numbers that start with 0s might be parsed as an octal, so a number like 0000000021 will become 17. See this article for more information. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates To get it to output in a format prefixed with 0s, you will need to convert it to a string and pad it. You can do this with a string's padStart method. There's also a polyfill for older browsers. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart But first, I would first store your counter element in a variable so you don't keep searching for it. var counter = document.getElementById("counter"); And then change the onUpdate callback to this. TweenLite.fromTo(Cont, 500, { val: 0 }, { val: NewVal, roundProps: "val", onUpdate: function() { counter.innerHTML = (Cont.val + "").padStart(10, "0") }, autoAlpha: 0, delay: 0.1 });
  7. Please check the docs. https://greensock.com/docs/NPMUsage If you still have issues, please create a new topic as this one is rather old.
  8. What kind of timeline are you trying to do? Like an interactive one, or one you just scroll through? I think GreenSock's Twitter is a good place for inspiration. https://twitter.com/greensock That's pretty easy to do with a standard timeline. Just replace time/duration values with pixel values, listen for scroll events, and BOOM! You now have MagicScroll ™. https://codepen.io/osublake/pen/bOGMaG
  9. See if this works. import { PixiPlugin } from 'gsap/PixiPlugin'; declare var PixiPlugin: any; const plugins = [PixiPlugin]; PixiPlugin.registerPIXI(PIXI); I honestly don't why that would make a difference unless WebPack has changed, or maybe your config is a little different. Can you send me a simplified version of your project? I'm curious to see why it's being dropped.
  10. I should clarify that I only meant for SVG elements. Setting the transform origin with CSS for HTML element won't cause any problems.
  11. That's understandable. I've known about hooks for quite sometime, I just haven't gotten my hands dirty with them yet, so it was a little confusing about how to set stuff up. I'm sure this is in React's docs, but can you quickly explain how useEffect works? Why is the first call like componentDidMount and the second call is like componentDidUpdate? Seeing how you did that, the demo I made above would look like this. There's really no difference besides being a little shorter. // componentDidMount React.useEffect(() => { TweenLite.set([topLine.current, botLine.current], { transformOrigin: "50% 50%" }); setTimeline( timeline .to(topLine.current, 0.1, { y: 6 }, 0) .to(botLine.current, 0.1, { y: -6 }, 0) .to(topLine.current, 0.1, { rotation: 45 }, 0.2) .to(botLine.current, 0.1, { rotation: -45 }, 0.2) .reverse() ); }, [timeline]); // componentDidUpdate React.useEffect(() => { timeline.reversed(!isMenuOpen) }, [isMenuOpen, timeline]);
  12. The old way would be pretty straightforward, similar to some of the demos on this page. https://greensock.com/react I just don't completely understand how useEffect works.
  13. React hooks is supposed to be an improvement? I don't get it. ?‍♂️ The way you have it, you're adding new animations to the timeline on every click. Create it once. https://codepen.io/osublake/pen/agjKrV Also, don't set transform origin with CSS. It's doesn't work the same in every browser.
  14. That demo is several years old, and I never made it work with HiDPI screens e.g. mobile, retina. For simplicity, I think you would be better off just using a div. This demo doesn't close, but you would just scale it back to 0... or whatever size you wanted. https://codepen.io/osublake/pen/VJBypa Taken from this thread.
  15. You can listen for media queries with JavaScript. https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList Although animating media queries values with CSS or JS probably isn't the best idea since the browser will be under a lot of stress recalculating the layout.
  16. If you have doubts, and your animation already works, then why are you trying to use Angular? There are plenty of articles written about Angular, but this should help you get started. https://teropa.info/blog/2016/12/12/graphics-in-angular-2.html#greensock
  17. I wouldn't say it uses TypeScript. It just compiles it. TypeScript needs a code editor that understands it, which CodePen doesn't use. You don't have to use CodePen. That's just what we like to use around here because it's simple and straightforward. If needed, Stackblitz is a good for TypeScript. It uses the same code editor as VS Code. https://stackblitz.com/ Just remember to keep your demos simple. We don't want to see your project, just the problem. ?
  18. Just want to point out that your notWorking example isn't working because you have an error in two different places. Fix those, and it should work the same as your working example. // BAD tl2.to("#circle",0.001); // OKAY tl2.to("#circle",0.001, {}); And I'm also not sure by what you mean by adding a pause. Like literally pausing the timeline or delaying it?
  19. The only thing I can tell you is to try using version 3 of webpack. Later versions handle require and import statements differently.
  20. I meant to only do that with the TextPlugin. But yeah, putting your imports inside an array works as well.
  21. See the docs on importing. If you don't explicitly reference the plugin, it might get dropped via tree shaking. https://greensock.com/docs/NPMUsage You can put TextPlugin in an array. I would just import it for side effects. import 'gsap/TextPlugin';
  22. You clearly have a some sort of transition in your CSS. Try removing that.