Jump to content
Search Community

Executing specific tweens on screen size

BadAnderson test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

See the Pen bdOjBq by BadAnderson (@BadAnderson) on CodePen

Link to comment
Share on other sites

Hi and welcome the GreenSock forums,

 

Would love to help but I am having difficulty understanding the issue and your code.

Your logo is not displaying and you have a lot of code for your nav that doesn't seem to be related to the problem.

 

Please provide a reduced test case that clearly represents the issue with as little code (CSS, HTML5, JS) as possible.

For the logo, please use the correct path to the image on a server or replace it with a colored div.

 

That aside, my basic understanding of the issue is that you will need to detect a window resize and create new animations when that happens.

 

Maybe look into matchMedia 

http://www.sitepoint.com/javascript-media-queries/

http://krasimirtsonev.com/blog/article/Using-media-queries-in-JavaScript-AbsurdJS-edition

 

 

Here is a demo I just found and edited quickly: http://codepen.io/GreenSock/pen/waRQZp?editors=101

 

 

Thanks

  • Like 2
Link to comment
Share on other sites

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. 

 

Link to comment
Share on other sites

Hello BadAnderson  :-) ,

 

I think the simplest approach to different tweens at different screen sizes would be to tween between classes.

 

You could have a class name to size your logo and tween your element to it. That class can then be set in your media queries to different percentages for different screen sizes. 

 

Here's the class tweening from the docs:

 

Allows you to morph between classes on an element. For example, let's say myElement has a class of "class1"currently and you want to change to "class2" and animate the differences, you could do this:

TweenLite.to(myElement, 1, {className:"class2"});

And if you want to ADD the class to the existing one, you can simply use the "+=" prefix. To remove a class, use the"-=" prefix like this:

TweenLite.to(myElement, 1, {className:"+=class2"});

Note: there are some css-related properties that don't tween like IE filters, but almost every css property is recognized and animates great. Also, there is a slight speed penalty when a className tween initializes because the engine needs to loop through all of the css properties to see which ones are different.

  • Like 1
Link to comment
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.
×
×
  • Create New...