Jump to content
GreenSock

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

Using Media Queries in TweenMax

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

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?

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

 

:)

  • Like 2
Link to comment
Share on other sites

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

 

edit... Duplicate of Jonathan's.

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Good stuff.  Glad I found this little forum. :)

Link to comment
Share on other sites

little forum??!! :huh:  <_< Dude this forum rocks and is huge, plain and simple.... :D

 

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 8-)

 

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

 

Happy Tweening!!!

  • Like 2
Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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.

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.
×