Shrink/Grow Animation

Hey, does anyone know how to build an animation like the page load triangle on this website?

The way it opens from the bottom while the top of the triangle is fixed.

Any help is much appreciated, thanks.

HI @BrandonMancini as I have mentioned in your previous request check website with DevTools. As you can see that this triangle is SVG element you can search internet for articles about SVG animation.

EDIT: Simple example

1 Like

hey @Stan thanks for the insight - still learning how to get better with using the devtools - for me to add this to the landing page would I name the divs accordingly and copy the code onto the site? I tried doing that, I must be missing something or doing it completely wrong

Oh ok, here it is in WF



1 Like

Ahh man, thanks a bunch, really helped me understand how to do this, truly appreciate it

HI @BrandonMancini I didn’t want to spend much time on it and it has some issues. But you can take it as initial starting point of principle. You can also do it different way eg. as it is done on their website to animate with of element etc. as there is many ways to achieve identical result :wink:

would you know how to go about making the triangle narrower? been messing around with the embed and haven’t figured it out

ok @BrandonMancini I have improved the example a bit so take your time to study it. :wink:

@stan thanks, youve been an absolute staple in helping me figure things out today :pray:

1 Like