Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
BadAnderson

Browser-size Conditional Animations + CSS media queries

Recommended Posts

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

Link to post
Share on other sites

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

  • Like 1
Link to post
Share on other sites

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. 

Link to post
Share on other sites

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. 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×