Jump to content
GreenSock

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

Search the Community

Showing results for tags 'mediaqueries'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 3 results

  1. Hello, can anyone help me with this error? (I want to preface that I'm a newbie at coding and I only try to adapt from other as much as I can understand...) I have adapted some code from the forum which explained how to use GSAP for different media queries but I cannot seem to make the functionality work... The idea: When page is fullscreen, the menu icon should trigger and animate GSAP timeline on >mouseenter/mouseleave< for selector ".menu-links". ( I used .play(); and .reverse(); ) When page is going devices size screens, mobile/tablet < 733px, the menu icon should trigger and animate GSAP timeline on >click< for selector ".menu-links + #social" ( I used .restart(); and .reverse(); ) ---- the code works right now only when page is loaded in mobile size to begin with, if resized functionality breaks. also vice versa, desktop resized to mobile ---- My question is can: this be done better? Ideal would be to resize page without losing functionality going from big screens to small screens without page reload. ==== ps: if this topic is wrongfully opened please feel free to delete it. Thank you very much, Alex
  2. Hi, I have an element that is set in the CSS to 100% to start and then animates to a smaller width. I need this width to be different if the screen is smaller so I'm using a $(window).width in JavaScript to pass the desired destination width to TimelineMax. This works but I need this width to respond to changes in window width. Using $(window).resize() to try and change these widths again in the JavaScript seems overkill. Can anyone offer a more elegant solution? I can't use .from because that element must be 100% when the page loads, and I can't circumvent the delay before the JS kicks in (as far as I know). Change the browser width before you run the Codepen to see the difference. Thanks!
  3. Hi Here is the part of my tween that I have problem with : rule = CSSRulePlugin.getRule("#sctrl table"); //get the rule if (scId==1) {var color="#2a2a2a"} else {var color="#f2f2f2"}; if (scId < currentslide) { TweenMax.to(rule, 1, {cssRule:{borderColor:color},ease:Power2.easeIn}); } and I have this css code : #sctrl table {width: 135px;height: 5px} #sctrl table,tr,td{border:1px solid #f2f2f2;border-collapse:collapse;padding: 0px} @media screen and (min-width: 1358px){ #sctrl {width: 120px;height: 6px;bottom: 25px} #sctrl table {width: 120px;height: 5px} #sctrl td {width: 60px;height: 5px} #sc {width: 60px;height: 6px} } the border color animates fine in chrome but it doesn't work in IE10. the interesting part is if I remove the mediaqueries in the css it will work in IE too. I wonder where is the problem ? the second question is I use multiple tweens at the same time and it's very slow in chrome. I tested in a few computers with chrome and in all of them it was slow. but if I remove this line of animations the speed will be very faster (more than twice): TweenMax.to(rule, 1, {cssRule:{borderColor:color},ease:Power2.easeIn}); what is your solution ? http://codepen.io/aminfa/pen/lnkCJ
×