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. That's how I taught JavaScript to new people. Put the "what" at the top (variables), and the "how" at the bottom (functions). Named functions are hoisted, so it's perfectly fine to declare them at the bottom of your code. It can make your code much cleaner looking.
  2. No, but are you using a setTimeout? That can cause problems with animations as it's not tied to the UI. If someone changes tab, the setTimeout will fire, but the animation might not. But this piece of code is what I meant by doing debounced calls. computed: { debouncedScrollTop(){ return debounce(() => this.scrollTop(), 1000) } }
  3. Yeah, I don't see how anything could happen in there. Where something could go wrong is the time in between a debounced call.
  4. I understand that. If you can verify that it's null at the time of the error, then the problem likely has nothing to do with with GSAP itself, and is probably further upstream in your codebase.
  5. You need to save a reference to your tween outside of a function. It's as simple as this: var myAnimation = TweenMax.to(".daclass",0.2, {rotation:15, transformOrigin:"left 50%", repeat: -1, yoyo:true }); If you need it to to be created by a function, you must return the tween. function loopedTweenMax(){ return TweenMax.to(".daclass",0.2, {rotation:15, transformOrigin:"left 50%", repeat: -1, yoyo:true }); } var myAnimation = loopedTweenMax(); Now you can control "myAnimation" inside of other functions. Notice how I removed your onComplete. Just use repeat: -1 to repeat infinitely. https://codepen.io/osublake/pen/ZdgBYg
  6. I'm at lost here. Maybe @GreenSock can chime in and see if anything sticks out. Are you able to reproduce the error yourself, or are you just going off of some logs? If line 51 is causing problems, then I would inspect what this returns: _unwrapElement(element) And what this returns: var elem = TweenChecker(target);
  7. It would help if you can show us what is going so we can try to reproduce the error. My first guess would be that you are using a framework like React, Vue, Angular, etc, and not properly referencing the element i.e. you are using a string to select elements instead of using refs.
  8. Getting rid of transforms depends on your software. For most, you can usually ungroup and group your paths. https://stackoverflow.com/q/13329125/2760155 It's best to let GSAP handle anything transform related. I would forget about using the AttrPlugin for now. It has it uses, but usually not for moving stuff. So this will move it forward 50. logoAnimation.to('#Path_23', 4, { x: "+=50"}); Or back 50. logoAnimation.to('#Path_23', 4, { x: "-=50"});
  9. Your path is sitting at a crazy coordinate. See those two numbers inside the transform="translate()" on your path? translate(-3723.339 3675.66) That's how far your path has been moved (x y). 30 is nowhere near -3723.339. That's like out in left field.
  10. I think this might be similar to your demo. And @ZachSaucier did something similar here. I don't think using a tween/timeline is the best approach for doing this. You need something a little more dynamic, like this: https://tympanus.net/codrops/2019/07/10/how-to-add-smooth-scrolling-with-inner-image-animations-to-a-web-page/ They are using linear interpolation (lerp) to do the smooth scrolling. It's just a really simple calculation. I just noticed that article mentions Jesper Landberg. https://codepen.io/ReGGae/ He is no stranger to these forums. I wonder if that is where he learned about lerp .
  11. swampthang is probably the best person to ask about this type of stuff. https://greensock.com/forums/profile/17360-swampthang/ I believe he converts his animations to png, one frame at a time, and then uses ffmpeg to combine everything into a movie.
  12. Convert your animation to a sequence of images, and then to video. There are several threads about that. This one links to most of them.
  13. I really haven't looked into this before, but this Stack Overflow answer says the firing order will be: DOMContentLoaded event listeners of window in the capture phase DOMContentLoaded event listeners of document DOMContentLoaded event listeners of window in the bubble phase load event listeners (including onload event handler) of window https://stackoverflow.com/a/38517365/2760155 And part of the spec: https://html.spec.whatwg.org/multipage/parsing.html#the-end
  14. We've been getting a lot of questions with hooks recently. Are you going to create hooks versions of your react demos? https://greensock.com/react
  15. It might not fire if everything has been cached. if (document.readyState === "interactive" || document.readyState === "complete") { onReady(); } else { window.addEventListener("DOMContentLoaded", onReady); } function onReady() { // ready code } But why are you listening for that event? I'm not saying it's a bad idea, but it might not be necessary. The DOMContentLoaded event is like jQuery's ready method, which is needed because some people put their scripts inside the <head> tag. I only listen for the window load event when I need to make sure my images are loaded, like when I'm working with canvas.
  16. Oh, I see. That's because you put that line of code inside a class. He meant to put that line directly after your imports. https://greensock.com/docs/NPMUsage
  17. Using var isn't going to break the internet, but using let or const might. You don't want to be like this guy, now do you? Well, only on older browsers, but I get why they would teach you to use let or const. I use let/const on real projects, but I use var on these forums because a lot of people don't understand let/const yet.
  18. Good idea, but that's only part of the problem. I still get direct messages on regular basis asking about those demos.
  19. Closing this thread for now. When Apple adds a root scroller I might revisit this again. Please feel free to use any of the code I've posted here for your own use. It's all covered under a MIT license on CodePen. https://blog.codepen.io/legal/licensing/
  20. I know I've posted that image more than once, but it took me awhile to find. I had to do an image search on Google. And yeah, I had no idea it was that long ago. I'm getting old. ?
  21. That sounds a little odd. What is the error? And are you going to do an Angular optimized build? If so, please test that out as soon as possible.
  22. See the STARS acronym here. Your order is wrong, and you should use translate instead of drawing something at an xy coord. var originX = this.width / 2; var originY = this.height / 2; creative.ctx.save(); creative.ctx.translate(this.x + originX, this.y + originY); creative.ctx.scale(this.scaleX, this.scaleY); creative.ctx.translate(-originX, -originY); creative.ctx.fillStyle = this.fill; creative.ctx.fillRect(0, 0, this.width, this.height); creative.ctx.restore(); And more particle stuff.
  23. Best book ever. I've been recommending it for years.
  24. No, I think you're stuck with using the body/html for now. That also causes problems on mobile with the URL bar showing and hiding. That's why I'd really like for that smooth scrolling thread to die. It's just way too problematic, and coming up with acceptable workarounds would take too much of my time. One bit of good news is that Chrome/Android has a solution for selecting which element is the root scroller. https://www.chromestatus.com/features/5162094739587072 https://github.com/bokand/root-scroller/blob/master/explainer.md Please let Apple know that you'd like have that feature.
  25. Do you do this? Remember to use files that are not modules, so no npm. Just use files from minified or uncompressed folders of your download.