Skip to main content
This topic has been closed for replies.
Correct answer Rick Gerard

Please just drag your images to the forum. It's much easier than any other way of trying to show us images and screenshots.

That said, and now knowing that the animation is moving bars with an edge opacity change based on the values in sound keys the setup probably involves nothing more than properly setting up the parameters in Sound Keys, generating the keyframes and then dragging a pickwhip from the appropriate animated property to the previously properly setup keyframe range created by Sound Keys. You can figure out what the ranges should be by looking at the values in the graph editor.

Let's say that you wanted to make a bar grow from 200 pixels wide to 800 at the maximum value of Output 1 in sound keys. You would pick the frequency range and draw the Range 1 box to cover the appropriate part of the waveform, then you would enter a custom minimum of 100 and maximum of 800 to the Output Minimum and maximum value. You then apply to generate keyframes for Output 1.

Now draw a bar using the shape layer tools and add an expression to the size parameter. You only want to adjust the x value but keep the y-value the same so you start by typing x = and then drag the pickwhip to the Output 1 property, type ; then press enter. Now youy complete the array by typing [x, value[1]] and you are done. The width of the bar will change from 100 to 800 pixels in time with the music.

To make the bar expand from the left side copy the same expression to the Rectangle 1>Transform Rectangle 1> Position property buyt add a /2 to the end of the x variable. The expression would look like this:

x = thisComp.layer("Sound Keys").effect("Sound Keys")("Output 2") / 2;

[x, value[1]]

To pin the right edge add the expression to the Anchor Point property. Now you have a bar that grows horizontally from a minimum of 200 to a maximum of 800 pixels.

To feather the right edge of the bar just duplicate the bar, make it a little taller to make sure, apply Gaussian blur and add use the copy as a track matte. Adjust the position of the track matte layer so the soft edge only covers the right edge.

If you want to also make the blur keep time with the music then pick a minimum and maximum value for the blur, set a range in Sound Keys and use the pickwhip to tie blurriness to the appropriate output keyframes that were generated. There's not much to it.  Your comp would look something like this. If you copy all of the values and expression from this sample and add your own audio track you'll see what I mean. The entire project took less time than it did to type this explanation. About 2 minutes. All of the critical modified properties have been revealed.

1 reply

Dave_LaRonde
Inspiring
December 10, 2017

Who says they're expressions?  They could be keyframes.

Participant
December 10, 2017

They are moving bars, applied to SoundKeys. My friend's bars are perfect because they don't have the outer opacity change. I was wondering how i can mimic that.

Rick GerardCommunity ExpertCorrect answer
Community Expert
December 11, 2017

Please just drag your images to the forum. It's much easier than any other way of trying to show us images and screenshots.

That said, and now knowing that the animation is moving bars with an edge opacity change based on the values in sound keys the setup probably involves nothing more than properly setting up the parameters in Sound Keys, generating the keyframes and then dragging a pickwhip from the appropriate animated property to the previously properly setup keyframe range created by Sound Keys. You can figure out what the ranges should be by looking at the values in the graph editor.

Let's say that you wanted to make a bar grow from 200 pixels wide to 800 at the maximum value of Output 1 in sound keys. You would pick the frequency range and draw the Range 1 box to cover the appropriate part of the waveform, then you would enter a custom minimum of 100 and maximum of 800 to the Output Minimum and maximum value. You then apply to generate keyframes for Output 1.

Now draw a bar using the shape layer tools and add an expression to the size parameter. You only want to adjust the x value but keep the y-value the same so you start by typing x = and then drag the pickwhip to the Output 1 property, type ; then press enter. Now youy complete the array by typing [x, value[1]] and you are done. The width of the bar will change from 100 to 800 pixels in time with the music.

To make the bar expand from the left side copy the same expression to the Rectangle 1>Transform Rectangle 1> Position property buyt add a /2 to the end of the x variable. The expression would look like this:

x = thisComp.layer("Sound Keys").effect("Sound Keys")("Output 2") / 2;

[x, value[1]]

To pin the right edge add the expression to the Anchor Point property. Now you have a bar that grows horizontally from a minimum of 200 to a maximum of 800 pixels.

To feather the right edge of the bar just duplicate the bar, make it a little taller to make sure, apply Gaussian blur and add use the copy as a track matte. Adjust the position of the track matte layer so the soft edge only covers the right edge.

If you want to also make the blur keep time with the music then pick a minimum and maximum value for the blur, set a range in Sound Keys and use the pickwhip to tie blurriness to the appropriate output keyframes that were generated. There's not much to it.  Your comp would look something like this. If you copy all of the values and expression from this sample and add your own audio track you'll see what I mean. The entire project took less time than it did to type this explanation. About 2 minutes. All of the critical modified properties have been revealed.