Having some trouble getting a Scrolltrigger animation adapting to screen size changes.
There are four icons equally spaced across the top of the page using flexbox, which are part of the site's nav.
When the page loads, these icons start out scaled up and placed at four corners of the viewport.
As the user scrolls down, each icon scales down and moves into place where flexbox has positioned them.
This demo I've put together is only a part of the full animation (which also includes photos scrolling by), but is pretty much doing what it should...except that it breaks on viewport resize.
I had originally built this with just Scrolltrigger and a regular GSAP timeline, but was struggling with getting the positioning right, due to needing the final position to be dictated by flexbox. So when I learned about Flip, it seemed like a good solution. And I think I'm on the right track, but willing to accept that I'm going about it all wrong.
I've tried solutions like this one but just couldn't get it worked out. Appreciate any thoughts anyone has!
-- Andrew
PS: There is also an animatic that shows what the final animation should do, just to help visualize it.
