Browser-size Conditional Animations + CSS media queries

[BadAnderson 0 Likes (Newbie)]

So on this website, I use Timeline to set up and intro animation on the home page. When I host it, I'll set a cookie script so it'll only happen the first time you hit the home page, but for now, it's part of the problem. I have CSS statements and media queries interacting with my script and it just occurred to me that I have queries in my script for the different values and dimensions of the animations based on screen size. It's hard to explain, but as I'm new to GSAP, I cannot think for the life of me how to make them now conflict. I've attached the files needed. Any help would be greatly appreciated. Maybe you can see what I'm going for. Sorry if it's a cluster****. It's been a messier process than usual. 

website.zip

[OSUblake 18,538 Likes (Superhero)]

Didn't you already ask about this?

 

If there's a conflict, remove one. How important is the CSS? Look at this example of a handling media queries with JavaScript.

 

See the Pen vExQEy by osublake (@osublake) on CodePen

[BadAnderson 0 Likes (Newbie)]

I'd posted about executing the Timeline functions on page widths, but not as includes the CSS media queries. Thanks, I'll take a look at that and see if it helps. It looks like it'll solve my problem. 

[OSUblake 18,538 Likes (Superhero)]

I didn't include any animations on that demo, but all you would have to do is add them to the switch statement make sure they only run once.