Jump to content

OSUblake last won the day on July 14

OSUblake had the most liked content!

OSUblake

Moderators
  • Content Count

    4,195
  • Joined

  • Last visited

  • Days Won

    432

OSUblake last won the day on July 14

OSUblake had the most liked content!

Community Reputation

9,790 Superhero

About OSUblake

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

18,392 profile views
  1. Here's an old demo I made that shows the beauty of using a Sine easing. https://codepen.io/osublake/pen/VjAvBq
  2. Please post exactly what your index.html file and your animation.js files looks like. I think the problem is somewhere in there.
  3. 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.
  4. 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) } }
  5. Yeah, I don't see how anything could happen in there. Where something could go wrong is the time in between a debounced call.
  6. 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.
  7. 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
  8. 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);
  9. 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.
  10. 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"});
  11. 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.
  12. 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 .
  13. 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.