[Creating a beautiful audio visualiser animation]

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!!

[Creating a beautiful audio visualiser animation]

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/

[Reveal any SVG shape - the mask way?]

Just curious if anyone is able to do this without drawSvg plugin?

[Creating particles using Webgl & Greensock]

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?

[Creating particles using Webgl & Greensock]

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 center will be like a container where the particles will not move in or interact. And when I move my mouse on the screen there will be a like a repelling effect on the particles, like the website above.

So in my head right now, my train of thought is like
1) Generate the particles moving inside the viewport (bouncing when reach the end or something)
2) Then animate the particles to move using Math.random or sin or cos (Not sure about this, I researched on sin and cos to make your motions looks more natural yet random, but haven't found an article to clearly explain how it works, what kind of maths formula should i be using?)
3) When the particles reached the letter, it bounces off (I assume you have to push it away with a if/else statement? So do I implement a collision library or something ? )

I'm still looking into p5.js (which is based on processing) and pixi.js (which is frequently recommend in this forum). But I'm unsure if pixi.js is to be compare similarly to p5.js. I guess I will definitely need to use webgl since there're tons of particles involved.



The pixi examples website seems to be extremely basic. Are there websites that explores more complicated stuffs like http://openprocessing.org/

[Updating a Tween position(x) after its initial completion]

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
 

See the Pen owEpjV by nickngqs (@nickngqs) on CodePen

 

[Move text with collision detection]

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 object will probably be a constantly changing object.

 

I can't seems to wrap my head around on how to create a Tween function that pushes a characters (near colliding object) out and then back when its not near the colliding object.

 

Any help is appreciated
 

[clear props for all tweens]

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 behaviour but is there a clear all properties for all tweens?

Currently, I'm using one of these two methods.

First method
I put transform: none !important or opacity in css using mobile media query, depending on what tween properties I'm using.

Second method
I use $('*[style]').removeAttr('style'); to get all elements with style attribute and remove the inline styles.

I'm just curious if this is advisable? Both works, but just thinking if there's a better approach that I'm unaware of.

[Best practice or advice in naming variables]

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 prefix your animation var names?

Feel free to drop me any suggestion or advice
 

[Getting control points of a wave svg and use it]

 

OMG, that makes so much sense now! Your explanation is really good as compared to other svg material I've been reading. Thanks alot!

 

The reason just grabbing two different SVGs and combining their paths generate gibberish motion is because they are two different SVGs. The code that makes their paths will be different because they were created differently

Your first two line got me thinking 'why am i so stupid, there're two different svgs =X'

[Getting control points of a wave svg and use it]

OMG, that makes so much sense now! Your explanation is really good as compared to other svg material I've been reading. Thanks alot!

[Getting control points of a wave svg and use it]

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.



 

See the Pen ENdOZy by nickngqs (@nickngqs) on CodePen