.thumb.jpg.45ad1f0654d8c8cd759c47599fe1796d.jpg)
SVG Masks in a Loop
https://staging.thebirdthebear.com/
I'm working on this particular animation, and having some issues.
It's a four-branch frilly thing that is supposed to reveal each branch. Triggered with Scrollmagic.
You can see it working properly on the first iteration in the section "OUR CRAFT."
Each branch is being revealed by removing the respective mask.
My issue however, is that the animation is not animating on the second iteration, "BRYAN & CARYN."
That's a good question, and a concept a lot of people might not be familiar with, hoisting.
https://www.w3schools.com/js/js_hoisting.asp
The JavaScript compiler will move all variable declarations (var) and named functions to the top of their scope.
This crazy looking code is totally valid.
num = 8;
num += 4;
var num;
console.log(num); // => 12
That's because the compiler is reading the code like this.
var num;
num = 8;
num += 4;
console.l
