Search the Community
Showing results for tags 'mediaqueries'.
Found 3 results
-
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
-
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!
-
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
