Jump to content
GreenSock

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

OSUblake last won the day on December 26 2019

OSUblake had the most liked content!

OSUblake

Moderators
  • Content Count

    5,062
  • Joined

  • Last visited

  • Days Won

    506

Everything posted by OSUblake

  1. Creating noise is just like calling a random function. The difference is that values won't vary as much, resulting in a more natural look. It's great for generating stuff like waves or terrain. Just a random Codepen I found that uses noise to generate waves. https://codepen.io/soju22/pen/PLeLwo
  2. That's the audio levels, but you can probably fake the values. Try searching for simplex and perlin noise. It can be used to create naturally random looking patterns.
  3. Just use the TextPlugin. https://greensock.com/docs/v3/Plugins/TextPlugin gsap.to("#gsap", { duration: 1, ease: "none", text: { value: "0 1 2 3 4 5 6 7 8 9 10 11 12 13...", delimiter: " " } });
  4. It's working correctly. I think your understanding of how animations work is a little off. An animation will update about every ~16.67ms, so the chances of it updating on every number change are practically 0. You would have better luck playing the lottery. To get it working like you want might take some work. You will need to make sure a number is not already in the array, and fill in any missing numbers between the last number in the array and the current number.
  5. The type needs to "cubic", and a cubic bezier needs a starting point. https://codepen.io/osublake/pen/f79dc245b16afad5b9710cebc8326d3c
  6. Having a prng would complicate the random api a lot. Here's a good library for that. https://github.com/davidbau/seedrandom And some videos showing how to make your own.
  7. I think the compiler is complaining about the conditional types, which is a feature that was added all the way back in version 2.8 (March 2018). https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html Try installing a newer version of TypeScript, to at least version 2.8. If you can't install a new version, then comment out random functions in the gsap-utitls.d.ts file.
  8. Heck yeah!!!! I'd say it's better than a college degree. I learned more about programming from Keith Peters than I did from all my years in college. I can't thank thank that man enough for his work. 🙏
  9. Hey @jonkwheeler I'll be sure to check it out next week. Unfortunately, I'm limited to mobile ATM. 😢
  10. It works in all modern browsers. https://caniuse.com/#feat=intersectionobserver For those who think supporting IE is a good idea, there are polyfills. https://github.com/w3c/IntersectionObserver Well this is a gsap forum, so I'm of course including gsap as a library. But you don't need any scrolling libraries when using the intersection observer. That kind of defeats the whole purpose.
  11. 1) Use the intersection observer. It's a browser feature, not a library, so it performs better. 2) See #1
  12. The most performant way to do that is with the Intersection Observer API. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API You can toggle the play and paused states of an animation based on if an element is visible. If you search around the forums, there are plenty of example of how to do this.
  13. More direct link. https://github.com/jonkwheeler/ScrollMagic/blob/99339d953a10e2ebc814675521cd9f73c707e5bf/dev/src/plugins/animation.gsap.js Raw https://raw.githubusercontent.com/jonkwheeler/ScrollMagic/99339d953a10e2ebc814675521cd9f73c707e5bf/dev/src/plugins/animation.gsap.js
  14. I already posted this link. https://github.com/janpaepke/ScrollMagic/pull/920 Secret, magic fixes are inside. That's all I have to say.
  15. Make sure you're using v3 plugins. You're text plugin is v2. I can't tell what version drawSVG you're using from those images. Also, it's a good idea to register your plugins. gsap.registerPlugin(MotionPathPlugin, TextPlugin, DrawSVGPlugin);
  16. Does it hamper the performance of your site? If yes, change it. If no, then it's probably not a problem. The location doesn't matter. JavaScript code is still running to make it animate. BUT.... just because JavaScript is running does mean there is going to be a performance problem. Most people don't understand what affects performance. GSAP JavaScript code will almost never be a performance issue. It's more about WHAT your are animating. Browser rendering is almost always the performance bottleneck. To maximize performance, you can animate a div instead of an SVG with force3D set to true, and set will-change: transform; in the css. gsap.to("#spinning-logo-triangle", { duration: 3, scaleX: 0, yoyo: true, repeat: -1, force3D: true }); More advanced optimizations could include only animating the triangle when the logo is visible, but that's beyond the scope of this post. In the end, I think your friend is making a mountain out of a molehill for such a simple animation.
  17. Eases are just functions now. var easedValue = Power2.easeIn( value ); Note that you can use use gsap.parseEase() to get the ease function from a string. var power2In = gsap.parseEase("power2.in"); var easedValue = power2In( value );
  18. I like this idea, but it requires reworking the API. increment would be my second choice.
  19. I don't have strong feelings either way, but I can see how this might be useful for interactive stuff, like dragging.
  20. No. Look at the hidden topics I created. The first one is copying and pasting the url link into the message. The second one is using the Codepen URL field.
  21. Yes. The CodePen urls can be used on other sites like: plnkr codesandbox stackblitz jsfiddle Or make a request for a site to be whitelisted.
  22. It will only embed a codepen in the first post IF and only IF you put the link in this field. Rather annoying because nobody does that. This issue was brought up several weeks ago.
  23. Like this. .to('#panda *', { duration: 2, scaleX: 1.2, scaleY: .85, y: -18, rotationX: 15, rotationY: -15, rotationZ: 2, ease: "elastic", stagger: 0.015 }, 0.2) .to('#panda *', { duration: 2, scaleX: 1, scaleY: 1, y: 0, rotationY: 0, rotationX: 0, rotationZ: 0, ease: "elastic", stagger: 0.015 }, 0.4) More advanced stagger options. https://codepen.io/GreenSock/pen/vYBRPbO Simplified easing using strings. https://greensock.com/docs/v3/Eases
  24. That's what I was suggesting with having a promisify method here. You would have to explicitly opt in, but it didn't make the final cut. https://github.com/greensock/GSAP/issues/322#issuecomment-553763556
×