Jump to content
Search Community

Using MediaQueryWatcher with ScrollMagic

Chris Prieto 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

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

Link to comment
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
Link to comment
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.

 

 

Link to comment
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
Link to comment
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.

Link to comment
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.

Link to comment
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
Link to comment
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
Link to comment
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

 

 

Link to comment
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
Link to comment
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
Link to comment
Share on other sites

  • 3 months later...

So after messing around with this for a bit I realized that the timelines need to have the same amount/types of tweens. Is that correct? Or am I just implementing it incorrectly?

 

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

 

if you comment out line #14 (.to('#pre ... it should start working as expected

 

I just wanna make sure that I *cannot* have two totally different sets of tweens per timeline per breakpoint

Link to comment
Share on other sites

Hey @Chris Prieto,

 

I'm guessing that you meant to post in your other thread?

 

Anyway, you should be able to have as many sets of tweens per timeline as you'd like. Is there some issue that you're running into? It might be best to move back to your other thread in order to not send notifications to all the fine people in this thread that's unrelated.

Link to comment
Share on other sites

@ZachSaucier no I deff. meant to post here, was just lazy and reused that pen. This question is all about media query watcher and the code from this thread is in question.

 

But yes I am having an issue it seems for some reason on my local I cannot get the clear props to work after browser resize. In this thread I was having the same issue and it was fixed by re-working the code, clearing the timelines and setting a clearProps for every object used in the tweens. Kind of at a loss and testing more to see if maybe it is the use of vars in the set tween that clears everything is the issue(?) Will report back if anything

  • Like 1
Link to comment
Share on other sites

the scrollmagic scene reverse:false seems to be the cause of the issue.

 

Bleh, I know this aint the scrollmagic support group but if anybody has any ideas I'd love to hear em. Gonna try and remove the reverse:false and the duration times to see if I can make do.

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