greensock not abiding by matchMedia

[djacobs]

link to fiddle: https://jsfiddle.net/hdfsexnq/3/

 

Hey yall. I am using a combo of scroll magic and greensock to achieve an animation.

 

 What im trying to do is have my greensock animation only occur when the browser is above 700 px using matchMedia. I set up some alerts so i know the browser is detecting the width correctly. When you load the browser below 700 px, the function works correctly and the animation doesn't load. But, when you load the browser above 700 px, the animation will happen on both the small and the large sizes, despite the alerts revealing that the mediaMatch is still working. Not sure why this is happening, tried multiple solutions with no avail so i figured i would ask here.

 

I am open to other solutions too!!!

 

thanks!

[PointC]

Hi @djacobs

 

Welcome to the forum.

 

We had a similar question a few weeks ago and I recommended enabling/disabling the scene based on the window size rather than creating the scene & tween each time the window is resized. Maybe this thread can point you to a solution.

 

Happy tweening.

[OSUblake]

4 hours ago, djacobs said:

Not sure why this is happening

 

Probably because your're creating 3 NEW scenes every time that function is called and the media matches. You're not saving a reference to those previously created scenes, so they're still active. 

 

Just follow the example @PointC gives in that thread and you'll be good.

[djacobs]

On 8/4/2017 at 4:22 PM, OSUblake said:

 

Probably because your're creating 3 NEW scenes every time that function is called and the media matches. You're not saving a reference to those previously created scenes, so they're still active. 

 

Just follow the example @PointC gives in that thread and you'll be good.

Hey, solved my other problem, but this comment led me to another comment that is potentially very stupid, but.. how do i save a refrence like you mentioned? Will that slow down my site?

 

I was wondering if there is a good way to combine all my tweens into one scene? My code looks like this, but i feel like what i'm doing is extremely inefficient

 

 

 

console.clear();
var controller = new ScrollMagic.Controller();
      //animations for desktop
      var divSlide = new ScrollMagic.Scene({
                triggerElement: "#trigger1"
              })
              .setTween(".headslide", 1, {ease: Expo.easeInOut, right:0, bottom:0, opacity:1})
              .addTo(controller);

      var textMove = new ScrollMagic.Scene({
                triggerElement: "#trigger1"
              })
              .setTween(".header-text", 1, {ease: Power3.easeInOut, width:"70%", height:"13vw"})
              .addTo(controller);
      var arrowMove = new ScrollMagic.Scene({
                triggerElement: "#trigger1"
              })
              .setTween(".white-arrow", 1, {ease: Power3.easeInOut, left:"35%"})
              .addTo(controller);

      var textFade = new ScrollMagic.Scene({
                triggerElement: "#trigger1"
              })
              .setTween(".headslide-text", 1, {ease: Power1.easeInOut, opacity:1})
              .addTo(controller);

      var subtextMove = new ScrollMagic.Scene({
                triggerElement: "#trigger1"
              })
              .setTween(".subheader-text", 1, {ease: Power3.easeInOut, width:"70%"})
              .addTo(controller);

      var bgMove = new ScrollMagic.Scene({
                triggerElement: "#trigger1"
              })
              .setTween(".header-content", 1, {ease: Power3.easeInOut, backgroundPosition:"30% center"})
              .addTo(controller);
      
      
      var desktopPin = new ScrollMagic.Scene({triggerElement: "#trigger2", duration: 300})
              .setPin("#pin1")
              .addTo(controller);


function sizeAll() {
  var w = window.innerWidth;
  
  if ( w < 1024) {
    divSlide.enabled(false);
    textMove.enabled(false);
    subtextMove.enabled(false);
    bgMove.enabled(false);
    desktopPin.enabled(false);
    arrowMove.enabled(false);
    divSlidemobile.enabled(false);
    textMovemobile.enabled(false);
  } else {
    divSlide.enabled(true);
    textMove.enabled(true);
    subtextMove.enabled(true);
    desktopPin.enabled(true);
    textFade.enabled(true);
    bgMove.enabled(true);
    backgroundMove.enabled(true);
    divSlidemobile.enabled(false);
    textMovemobile.enabled(false);
    
  }

}

$(window).resize(sizeAll);
sizeAll();

 

[PointC]

I think you're fine now. What @OSUblake meant was that you were creating new scenes each time the media matched in your first demo. What you have now is creating the tweens/scenes outside of the resize function. All the resize listener is doing now is enabling/disabling the scenes based on the screen size. That's exactly what you want. 

 

Your question about efficiency - those scenes aren't similar so you really can't create them in a loop very well. You could possibly put the scene parameters and the tweens in an array and loop through that to create them, but with only a few scenes, I'd probably leave it as you have it. 

 

If you want to shorten your resize listener, you can enable/disable the whole controller rather than each individual scene. 

http://scrollmagic.io/docs/ScrollMagic.Controller.html#enabled

 

Hopefully that helps. Happy tweening.

[PointC]

Sorry - I read your code too quickly the first time. I was only looking at the tweens.

 

Upon reading it a second time, I see your triggerElement is the same for all those scenes. That being the case, yes - you can absolutely shorten all that. You just need to create a timeline with all those tweens and set their position parameter to 0 so they all fire at the same time. You then add that timeline to one scene and you're good to go. The only other scene you'd need would be that pin on trigger 2.

 

Hopefully that helps. Happy tweening and scrolling.