Jump to content
Search Community

Using Media Queries in TweenMax

NickToye test
Moderator Tag

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

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

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.
×
×
  • Create New...