Using Media Queries in TweenMax

[NickToye 1 Likes (Newbie)]

Hi,

 

I'm getting somewhere slowly with all this, but my client is now asking for the same content to be animated differently depending on the device.

 

So I did a little research and thought this would work:

 

$(function () {
var controller;


controller = new ScrollMagic();


var mobile_tween = new TimelineMax()
.add(TweenMax.to("figure:nth-of-type(1) .info", 0.5, {opacity: "1"}))
.add(TweenMax.to("figure:nth-of-type(1) .info h2", 0.3, {opacity: "1"}))
.add(TweenMax.to("figure:nth-of-type(1) .info p", 0.3, {opacity: "1"}))
.add(TweenMax.to("figure:nth-of-type(2) .info", 0.5, {opacity: "1"}))
.add(TweenMax.to("figure:nth-of-type(2) .info h2", 0.3, {opacity: "1"}))
.add(TweenMax.to("figure:nth-of-type(2) .info p", 0.3, {opacity: "1"}));
// build scene
if($('body').width() <= 400) {
var scene = new ScrollScene({triggerElement: "#tweenTrigger"})
.setTween(mobile_tween)
.addTo(controller);
};
});

However, the tweening animation is being triggered on both desktop and tablet.  Any ideas what I've done wrong?  Also is there anyway I can drop in a For loop to increment the figure child number?

 

[NickToye 1 Likes (Newbie)]

Actually this worked.

 

$(function () {
var controller;


controller = new ScrollMagic();


var mobile_tween = new TimelineMax()
.add(TweenMax.to("figure:nth-of-type(1) .info", 0.5, {opacity: "1"}))
.add(TweenMax.to("figure:nth-of-type(1) .info h2", 0.3, {opacity: "1"}))
.add(TweenMax.to("figure:nth-of-type(1) .info p", 0.3, {opacity: "1"}))
.add(TweenMax.to("figure:nth-of-type(2) .info", 0.5, {opacity: "1"}))
.add(TweenMax.to("figure:nth-of-type(2) .info h2", 0.3, {opacity: "1"}))
.add(TweenMax.to("figure:nth-of-type(2) .info p", 0.3, {opacity: "1"}));
// build scene
if($('body').width() <= 400) {
var scene = new ScrollScene({triggerElement: "#tweenTrigger"})
.setTween(mobile_tween)
.addTo(controller);
} else {
TweenMax.killAll();
};
});

But I still think I could probably make this more elegant.

[NickToye 1 Likes (Newbie)]

Actually this doesn't work.

 

$(function () {
var controller;


controller = new ScrollMagic();


var mobile_tween = new TimelineMax()
.add(TweenMax.to("figure:nth-of-type(1) .info", 0.5, {opacity: "1"}))
.add(TweenMax.to("figure:nth-of-type(1) .info h2", 0.3, {opacity: "1"}))
.add(TweenMax.to("figure:nth-of-type(1) .info p", 0.3, {opacity: "1"}))
.add(TweenMax.to("figure:nth-of-type(2) .info", 0.5, {opacity: "1"}))
.add(TweenMax.to("figure:nth-of-type(2) .info h2", 0.3, {opacity: "1"}))
.add(TweenMax.to("figure:nth-of-type(2) .info p", 0.3, {opacity: "1"}));


var tablet_tween = new TimelineMax()
.add(TweenMax.to("figure:nth-of-type(3) .info", 0.5, {opacity: "1"}))
.add(TweenMax.to("figure:nth-of-type(3) .info h2", 0.3, {opacity: "1"}))
.add(TweenMax.to("figure:nth-of-type(3) .info p", 0.3, {opacity: "1"}))
.add(TweenMax.to("figure:nth-of-type(4) .info", 0.5, {opacity: "1"}))
.add(TweenMax.to("figure:nth-of-type(4) .info h2", 0.3, {opacity: "1"}))
.add(TweenMax.to("figure:nth-of-type(4) .info p", 0.3, {opacity: "1"}));
// build scene
if($('body').width() <= 400) {
var scene = new ScrollScene({triggerElement: "#tweenTrigger"})
.setTween(mobile_tween)
.addTo(controller);
} else if($('body').width() >= 768 && $('body').width() <= 1024) {
var scene = new ScrollScene({triggerElement: "#tweenTrigger"})
.setTween(tablet_tween)
.addTo(controller);
} else {
TweenMax.killAll();
};
});

I can setup a CodePen to illustrate, but if I can get some tips based on that, it would be good.

[OSUblake 18,491 Likes (Superhero)]

You can match media queries with JavaScript, although IE support is limited.

 

https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Testing_media_queries

 

Here's a demo displaying a different div based on the screen width. Resize the window to see it change. You could add some logic inside the match statements for your media queries.

 

See the Pen KwWRwK by osublake (@osublake) on CodePen

[NickToye 1 Likes (Newbie)]

Codepen doesn't work there.  It stays on Desktop.

[OSUblake 18,491 Likes (Superhero)]

Maybe you weren't able to resize it to < 400px. I changed it to 600px. See if that helps.

 

See the Pen KwWRwK by osublake (@osublake) on CodePen

[Jonathan 5,392 Likes (Superhero)]

Hello NickToye,

 

If you are having issues viewing codepen in iE.. keep in mind that codepen does not work in IE8, unless you only view in FULL PAGE mode.

 

So using OSUblake's codepen example, the FULL PAGE mode would be this for IE8:

See the Pen KwWRwK by osublake (@osublake) on CodePen

 

[NickToye 1 Likes (Newbie)]

Cool so MatchMedia is bundled with jQuery?

[Jonathan 5,392 Likes (Superhero)]

MatchMedia inst exclusive to jQuery but part of native JavaScript.. so you can use it even without jQuery.

 

Please see the following link for more information.

 

https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia

 

[OSUblake 18,491 Likes (Superhero)]

No jQuery needed. It's a method on the window object.

 

edit... Duplicate of Jonathan's.

[NickToye 1 Likes (Newbie)]

Awesome thanks.  Need to add this into my Bootstrap now.

[Rodrigo 5,399 Likes (Superhero)]

Hi,

 

Jonathan and Blake have you pretty well covered in this one, so I'll add that if you need support for old IE versions, you can use Respond:

 

https://github.com/scottjehl/Respond

[NickToye 1 Likes (Newbie)]

Good stuff.  Glad I found this little forum.

[Rodrigo 5,399 Likes (Superhero)]

little forum??!!    Dude this forum rocks and is huge, plain and simple....

 

Jokes aside, we're here to help and as you can see there's a bunch of great users willing to help folks with their issues regarding GSAP

 

If anything else comes up don't hesitate to come back.

 

Happy Tweening!!!

[OSUblake 18,491 Likes (Superhero)]

Here's another tip. You can add listeners to your media queries instead of doing a window resize event to find a match. Adding listeners will allow you to create a dynamic list of queries for things like height, width, orientation, handheld, aspect, etc. 

 

Here's a scaled down version of what I use. You can see the dynamic queries in action when you click the remove button on the large media div.

 

See the Pen vExQEy by osublake (@osublake) on CodePen

[NickToye 1 Likes (Newbie)]

Cool.  If anything it will improve my JavaScript.  It's always been my weakest string in my bow, so I learn things and stick to them, rather than expanding.  I just don't always have the time, but this will definitely help.