Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

4 Newbie

About Buntafujiwaaa

  • Rank

Recent Profile Visitors

928 profile views
  1. Cool thanks!! The web audio api is not something I was looking for, I'm just pushing myself to recreate the animation with GSAP. For example, if I'm looking closely there's a wave like random looking bars going out. I'll try this out and see what I can achieve Thanks!!
  2. Hi guys, I'm trying to learn how to build a beautiful audio visualiser that looks fluid. How do you think I should do it? I'm trying to find examples on codepen but can't seem to find any. Is there a certain name for this kind of style for reference. How do I make them move randomly and visually appealing https://www.cssscript.com/demo/minimal-audio-visualizer-with-canvas-and-vanilla-javascript/
  3. Just curious if anyone is able to do this without drawSvg plugin?
  4. Thanks guys! I think it clears up abit about some stuff!. Do you guys have a site where they have specifics inspirations for Threejs and pixi js?
  5. Hi, Recently, I'm trying to explore slightly more advanced animations. I'm scoured the web, forums for any examples, but it seems I'm stuck. Wondering if anyone can point me in some directions. I'm trying to achieve an similar effect like this -> https://looi.co/ But, probably not as complicated as this site. I believed there's certain level of 'voodoo' in this lol. The example above is using Three.js, nt sure if greensock is being used. I'm looking to do some interactions, and gravity in my visualisations. See, my attached design -> So the letter in the cente
  6. Hi you can use a timeline to control that effect. Note, that progress is from 0 to 1. So if you having easing effect, you need to find the exact time where the thing is center. Alternatively, you can do also do a double TweenMax.to on a timeline and add labels in between. Note, you can also use x instead of left but I'm just showing the concept. If you need to use x, you can make changes to how your css is styled
  7. Hi guys! I've been trying to figure out how to do a text that interacts with a object. With the text being push away from an object when it's near the object. I tried using on several physics library and it seems most of them are overkill and hard to control. (For example, its hard to bind the text back to its original position as the collision library either makes it a static or a dynamic [reacting to gravity]. ) Currently, there is what is on my head. Correct me if i'm wrong. I probably need to make use requestAnimationFrame to constantly detect the collision. As the collision ob
  8. I'm trying to disable all animations in mobile viewport. I'm using enquire to detect and init animations depending on screen size. And Scrollmagic for scroll based animations. I disabled scrollmagic controller in mobile viewport. All scenarios work perfectly except one. In the event where the user starts from a deskstop and resizes to a mobile viewport, the element doesn't get trigger since properities are already applied. For example, an element has autoAlpha: 0, then in mobile viewports -> controller gets disabled -> autoAlpha is still applied and doesn't run. This is intended
  9. Hi Everyone, this is not a animation related question, just wish to get some advices or suggestions to name tweens animation. How do you guys modularise your code or name your variables in terms of code readability. For example, var $object = $('.object'); This allows me to have a quick glance and know this is a jQuery or DOM element. Currently im using something like this, so I can tell it's a animation type var _obj = TweenMax.from($object, 0.6, { autoAlpha: 0, ease: Power1.easeOut }); But I really wish to use the underscore _ as a private method/function identifier. Do you guys p
  10. OMG, that makes so much sense now! Your explanation is really good as compared to other svg material I've been reading. Thanks alot! Your first two line got me thinking 'why am i so stupid, there're two different svgs =X'
  11. OMG, that makes so much sense now! Your explanation is really good as compared to other svg material I've been reading. Thanks alot!
  12. I've look through several methods and the forum but can't seem to still wrap my idea about manipulating the svg. Without using MorphSVG plugin, is there a way to control a specific point of my wave svg path to move upwards and downwards. See the red dots in both attached image. Do I really need a library like Snap.svg or something to convert them into data? I know you can change the path d attribute. Thus my very first try was to grab two different svg and change the d attributes But all I get is jibberish movements. See codepen for example.