Jump to content
Chris Prieto

Using MediaQueryWatcher with ScrollMagic

Recommended Posts

So I tried really hard to not start another thread about responsive tweening but that is ultimately where I started.

 

With the help of Blake's codepen's I think I wrapped my noodle around it to an extent by forking his MediaQueryWatcher codepen's (https://codepen.io/ionz149/pen/VOaBZv, https://codepen.io/ionz149/pen/VOaBZv).

 

Since those worked I thought I would take a stab at integrating it with ScrollMagic to see if it would work. I got it working in first ScrollMagic scene but once I added the second MediaWatcher to the second scene only the second one works and the first one stopped working.

 

I am sort of muddling my way thru this so I might be going about it all wrong but also kind of hoping it is something stupid being overlooked due to my lack of javascript expertise. I also realize this is not a ScrollMagic support forum but I figured somebody might be able to point me in the right direction.

See the Pen KLzEwR by ionz149 (@ionz149) on CodePen

Share this post


Link to post
Share on other sites

First a disclaimer:

 

"ScrollMagic is not a GSAP product, therefore is not officially supported here". However, that does not stop anybody who wants to, to jump in and offer assistance.

 

Now to quote the illustrious @PointC:

 

wv1gEPi.jpg

 

 

 

Tell me, what is the expected behaviour? The media query appears to be working to me. What should I be seeing if what you intended to achieve had worked?

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

Hah! Totally understandable and I did mention that in my post but figured it was worth a shot since I learned about the MediaQueryWatcher stuffs here. Kind of hoping I was doing something obviously wrong. Anyways thanks for bothering to look :D

 

I could be going about it all wrong but I am trying to come up with a reliable approach to manage separate animations of same elements for desktop and mobile devices.

 

Expected behavior would be:

screens wider than 640: blue section has text coming in from sides, orange section has text coming from bottom

screens 640 or less: blue section has text coming in from bottom, orange section has text coming in from sides

 

Which is kiiiind of working at first glance. The issue is if I resize while blue section is on screen when I scroll down to the orange section it will be blank. Doesn't always happen the first time. Resizing it a few times will eventually leave both sections blank, or just the image will show, some times the image and title. It is rather consistently inconsistent and doesn't error out in the console for me.

 

 

Share this post


Link to post
Share on other sites

The what of it is that visibility hidden is remaining on the objects, so I am guessing it's getting stuck on autoAlpha0. I haven't investigated far enough to figure out the why.

 

I don't have the time right now to figure out how this is all supposed to work but here's a shot in the dark you are defining scrollMagic scenes in each media query fired function. Once these scenes are defined however I think they run on their own which means they may be confilcting with one another.

  • Thanks 1

Share this post


Link to post
Share on other sites

Thanks for taking a peek! I'm still getting my grips on Code Pen so when I first posted this pen it was actually just the tweens/timelines defined in each media query. When I changed it to how it is now I overwrote that and it is now behaving a bit better however as you noted the autoAlphas are getting stuck. While I have no way of proving it to be true I too share the hunch that the scenes are fighting each other.

 

I tried it with just one media query and both sections in each breakpoint, yields identical results (https://codepen.io/ionz149/pen/wbgGJN)

 

I also tried one using not using the Media Query Watcher, which seems to be working (https://codepen.io/ionz149/pen/ZNLbmo)

 

So at least I know it is possible and it seems it is more than likely something I am doing wrong with the media query watchers/scrollmagic. However I am still very interested in knowing how to set this up the correctly using the media query watcher.

Share this post


Link to post
Share on other sites
29 minutes ago, Chris Prieto said:

While I have no way of proving it to be true I too share the hunch that the scenes are fighting each other.

 

You could use an onComplete callback on the timelines with a console log telling you timeline 1 ran, timeline 2 ran etc... this could tell you if the expected timeline is running or not.

Share this post


Link to post
Share on other sites

It's what Visual-Q has pointed out: You're creating a bunch of new scenes and timelines and adding them to the ScrollMagic controller. Plus the fact that when you resize the screen and trigger an rebuild of your timeline you're not cleaning up the timelines or the inline style already in the elements.

 

See bellow for a fork of your pen where things seem to work as you expect:

 

See the Pen oRBPdb?editors=0010 by dipscom (@dipscom) on CodePen

 

  • Like 4

Share this post


Link to post
Share on other sites

I was playing with this and came up with almost the same solution as @Dipscom though mine just overwrites the timelines instead of clearing them.

 

The main takeaway from both examples is I think get the scroll magic scenes out of the mediaQuery function and only define them once, only the properties of the timelines need to be redefined on resize.

 

You can also put all the timelines in a single media function in this case.

 

See the Pen OYWXjV by Visual-Q (@Visual-Q) on CodePen

  • Like 2

Share this post


Link to post
Share on other sites

Hear the man.

Share this post


Link to post
Share on other sites

I have a followup question for this:

 

Pedros more elegant solution sets the timeline once and clears it to add new methods. Mine just writes a new timeline on the variable. Is there any difference between the two as far as garbage collection goes, i.e. if you just overwrite the timeline on the variable is the original timeline and it's children wiped out or are they still kicking around hogging resources?

 

// Define timeline once and clear timeline each time

var timeline = new TimelineMax();

//set timeline properties
timeline.addMethods

//reset timeline properties
timeline
 .clear()
 .addNewMethods


// Define New timeline each time

//set timeline properties
section1MTl = new TimelineMax()
  .addMethods

//reset timeline properties
section1MTl = new TimelineMax()
  .addMethods

 

 

Share this post


Link to post
Share on other sites

That will be a question for @GreenSock himself.

 

Let us all bow with our faces on the dirt while we wait for the Mighty CodeGod.

 

ps: I don't think there will be a noticeable difference unless youre doing it a stupid number of times a second. Which I find unlikely.

  • Haha 1

Share this post


Link to post
Share on other sites
4 minutes ago, Dipscom said:

Let us all bow with our faces on the dirt while we wait for the Mighty CodeGod.

 

 

I am appropriately prostrated awaiting wisdom.

  • Like 1
  • Haha 1

Share this post


Link to post
Share on other sites

Oh nice! Thanks so much @Dipscom and @Visual-Q.

 

It never once occurred to me that the scrollmagic and timelines can be separated like that. I recently had an issue that was more than likely related to this as well. I also forgot all about the clearProps which to be honest I've only used once or twice in tutorials. Deff helps to see both approaches.

 

 

  • Like 2

Share this post


Link to post
Share on other sites

Yeah, I doubt that anyone would notice a performance difference in the real world. I'd slightly favor the clear() approach, though, because it keeps the instances to a minimum and doesn't have to worry about overwrite logic internally. 👍

  • Like 1

Share this post


Link to post
Share on other sites
21 hours ago, Chris Prieto said:

It never once occurred to me that the scrollmagic and timelines can be separated like that.

 

As long as the variable holding the timeline is a global or at least is scopable to scrollMagic it's values can be defined/redefined in the media function and it should be accessible to scrollMagic's methods.

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.