Hello,
I am using GSAP for animation, What I am going is when user scrolls the 300 from the top then .signup_header class will active with top:100 which is working in the desktop. Now I have to set top:50px in the mobile device then how can I set for it.? because in the mobile also it's talking 100px.
I mean can we change the animation or CSS for the mobile device?
$(window).bind('scroll', function () {
if ($(window).scrollTop() > 300) {
Here's a helper function to respond to media queries.
function installMediaQueryWatcher(mediaQuery, layoutChangedCallback) {
var mql = window.matchMedia(mediaQuery);
mql.addListener(function (e) { return layoutChangedCallback(e.matches); });
layoutChangedCallback(mql.matches);
}
Example usage...
installMediaQueryWatcher("(min-width: 600px)", function(matches) {
if (matches) {
TweenMax.to(".red", 1, { x: 200 });
TweenMax.to(".blue", 1, { x: