Dear Community,
Here’s an Intro Animation done with 16 layers of masks and Size, Position & Rotate filters without fade in/fade out for the Gospel 4 All YouTube Channel…
2 Likes
Looks very nice.
I would be interested to see how you did the waveform animation.
Can you share the MLT file?
1 Like
Wow that sounds like a lot of work! Nice and smooth
Thanks for the project file @josept 
I took a look at it and I agree with @shotcut, you’ve put a lot of work into this.
Totally worth it though.
1 Like
Thanks. About 4 hours from concept to fine tuning…
1 Like
That’s very good going for a really neat effect. I looked at the MLT file and would have estimated about twice that long. Mind you I have probems remembering the keyboard shortcuts so I’m always using a mouse, which slows things down a quite a bit.
I did something similar using HTML/CSS/Javascript for a friend’s website a few years ago. I resurrected it and modified it slightly to be more like yours. See below.
2 Likes
Nice effect! Smooth. Sometimes taking time over something is worth it in the end. Composing music is another example… 
@elusien, brilliant. If you are able to post the HTML I’d be very interested! No worries if not of course…
Thanks Jonray…
Your wish is my command oh master!
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
:root {
--screen_width : 1080px;
--screen_height : 750px;
--equalizer_width : 400;
--equalizer_height : 200;
--nbars : 16;
--bar_width : calc(var(--equalizer_width) / var(--nbars) - var(--bar_margin));
--bar_height : 180;
--bar_margin : 4;
--bar_border_width : 4;
--bar_border_radius: calc(0.5 * var(--bar_width));
--equalizer_time : 10;
--sample_time : 0.15;
}
#screen {display: flex; flex-direction: column;}
#screen * {box-sizing: border-box;}
#equalizer {
display: flex; flex-direction: row; align-items: flex-end;
width : calc(1px * var(--equalizer_width ));
height : calc(1px * var(--equalizer_height));
background-color: lightcoral;
}
.bar {
width : calc(1px * var(--bar_width ));
height : calc(1px * var(--bar_height));
margin : calc(1px * var(--bar_margin));
background-color: white;
border : solid black calc(1px * var(--bar_border_width));
border-radius: calc(1px * var(--bar_border_radius));
}
#separator {
display : inline-block;
width : calc(1px * var(--equalizer_width ));
height : calc(1px * var(--bar_height) * 0.1);
border : solid black calc(1px * var(--bar_border_width));
background-color: red;
}
#title {
display : inline-block;
width : calc(1px * var(--equalizer_width ));
font : 72px roboto;
text-align : center;
color : white;
text-shadow : 3px 0 black, -3px 0 0 black, 0 3px 0 black, 0 -3px 0 black,
3px -3px black, -3px 3px 0 black, 3px 3px 0 black, -3px -3px 0 black;
background-color: lightpink;
}
</style>
</head>
<body>
<div id="screen"><div id="equalizer"></div><div id="separator"></div></div><div id="title">Disco Beat</div></div>
</body>
<script>
$(function() {
const root = getComputedStyle(document.documentElement);
const p = {
screen_width : root.getPropertyValue('--screen_width'),
screen_height : root.getPropertyValue('--screen_height'),
equalizer_width : root.getPropertyValue('--equalizer_width'),
equalizer_height : root.getPropertyValue('--equalizer_height'),
nbars : root.getPropertyValue('--nbars'),
bar_margin : root.getPropertyValue('--bar_margin'),
bar_border_width : root.getPropertyValue('--bar_border_width'),
bar_border_color : root.getPropertyValue('--bar_border_color'),
bar_border_radius: root.getPropertyValue('--bar_border_radius'),
bar_width : root.getPropertyValue('--bar_width'),
bar_height : root.getPropertyValue('--bar_height'),
sample_time : root.getPropertyValue('--sample_time'),
equalizer_time : root.getPropertyValue('--equalizer_time'),
};
//console.log(p);
const $equalizer = $('#equalizer');
for (let n = 0; n < p.nbars; n++) {
$equalizer.append('<div class="bar"></div>');
}
const tl = gsap.timeline();
const bars = gsap.utils.toArray('.bar');
const nloops = p.equalizer_time / p.sample_time;
for (let loop = 0; loop < nloops; loop++) {
for (let nbar = 0; nbar < bars.length; nbar++) {
tl.to(bars[nbar], {height: gsap.utils.random(0,p.bar_height), duration: p.sample_time}, (nbar === 0) ? '>' : '<');
};
}
});
</script>
</html>
My pleasure. Sorry for invading your thread with the HTML BTW! I hope you find it interesting though.
Thank you. I just tried it though and it just gave a static image with no animation. Did I copy something incorrectly?
Sorry, my mistake. slight bug changing a couple of "let"s into "const"s.
I have corrected the code above, so just re-download it.
1 Like