BadAnderson

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.

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

There, I've fixed it. Thanks for the response. To put it more simply, my scale values will be different based on different screen sizes. It's not just a one-percentage-fits-all. So I need a separate tween to execute on a screen width of under 768px or something. http://codepen.io/BadAnderson/pen/bdOjBq

I've seen a lot of posts about media queries and running animations on screen size, but I haven't seen any that I can use for my problem. My problem is that between the mobile/tablet and desktop versions, the original logo is a different percentage size and is scaled down to a different size. Forgive my code. It's a little sloppy at the moment. But as you can see, on the desktop version, the original img width is 50%, and on mobile/tablet, it's 90%, so the post-animation sizes will be different as well. Can anyone help with this? Thank you.