Conditional Logic Issue on a Tween

[pauljohnknight]

Hi

I have strange problem with an animation that I can't get my head around.  

I have an animation that is dependent on window size - a simplified codepen is above and simplified code below.

 

Basically it's set so that if the window is greater than 1024px the animation fires, if it is less than 1024px the else part of the conditional logic is set to an animation lasting 0 seconds to effectively prevent the animation happening. I've predominately done this because the elements change dimensions quite markedly on mobile so the animation wouldn't really work.

 

At first glance the above all works OK, and on the actual site I have the reverse: false; property on scroll magic so it only fires once (i've taken this off the codepen so you don't have to keep reloading the page).

 

PROBLEM

When the window is bigger than 1024px the animation fires (desired behaviour)
When the window is less than 1024px animation does not fire (desired behaviour)

 

When window is loaded above 1024px, and then the window is resized below 1024px, the animation still fires (not desired behaviour)

 

Now, the normal solution would be to just add an event listener that triggers on a resize event, and pass the name of the function holding the tween into the event listener.  However because the trigger is scroll magic, I can't do that because it creates a second instance of the function being called and basically doesn't work.

 

The actual site is now finished and this is the final issue, I just seem to be going around in circles.

Does anybody know how I can have it so when the window is resized after loading, the else part of tween takes priority and the tween effectively doesn't animate?

 

P.S.
In the future I'll just add an identical section that only shows on mobile, that is hidden on desktop and swap them out, but because this animation is happening on a wordpress site with a large homepage, I'd have to rename so many elements (and their equivalent stylesheet info and JS variables) because I've used the class names that are dynamically generated by the wordpress theme, and adding a new section basically changes the names of them.

I can't believe I've got myself into such a ball-ache.  

As well as the simplified codepen, here is the simplified JS for quick reference

 

  
function theAnimationTween() {
  if (window.innerWidth > 1024) {
    var tl = new TimelineMax();
    tl.to("#box", 0.5, {x: 200});
  } else {
  tl.to("#box", 0, {x: 0});
  
  }
  
  return tl;
}
var controller = new ScrollMagic.Controller();
var blockScroll = new ScrollMagic.Scene({
  triggerElement: "#box",
  triggerHook: 0,
  })
  .setTween(theAnimationTween())
  .addIndicators()
  .addTo(controller);

 

See the Pen jwRVzK by pauljohnknight (@pauljohnknight) on CodePen

[PointC]

Hi @pauljohnknight

 

Is this the only ScrollMagic animation on the page? My assumption is that you don't want any of the ScrollMagic triggers to happen when the user resizes the page below 1024. If that's the case, you may want to use your conditional logic for the window size on ScrollMagic rather than the tweens. You could only create it if above 1024 and if the user starts > 1024, but resizes below that, you also have the option of destroying the ScrollMagic controller via a resize event listener. 

 

http://scrollmagic.io/examples/expert/removing_and_destroying.html

 

Hopefully that helps. Happy tweening.

[pauljohnknight]

Hi Point C.

 

There are two scrollMagic triggered tweens on the page (but they are basically identical), so yes I would be happy to remove both of them for Window sizes under 1024px, and for the original state of the element to preside when the window is resized after page load.  

 

I can't get this to work though?

 

If you could show us how to do this on the on the codepen I'd be happy to ping you a $fee for you efforts.  

 

Adding conditional logic to the ScrollMagic invocation of the tweens doesn't seem to work either? I also looked at that link you posted when I googled possible solutions originally, but I can't get that to work either.

 

In terms of the codepen, I just need it so the tween doesn't animate below 1024 px in any instance whatsoever, (including after reducing the window size when the window size is above 1024 px when initially loaded).

 

I seem to be getting either no elements animating, or the tween being called twice when i re-size the window? Any solution posted on the codepen would be very easy for me to transfer onto the site.  

 

It's basically this - animate over 1024px, but don't animate at all if the window is below 1024px (or reduced to below 1024px after page load).

 

I do appreciate your help thus far, and as per the above I'd be be happy to ping a fee for a solution.

 

Many thanks in advance
 

Paul.

[PointC]

After thinking about this, I guess you probably wouldn't want to destroy the ScrollMagic controller if they size below 1024 because they could size back up too. I'm assuming if they size back up you'd want the scroll trigger to work again, right?

 

If that's the case, I'm thinking simply enabling or disabling the scene based on window size is probably the best solution for your needs. I didn't have a lot of time, but here's a quick fork of your pen that shows how to do that:

See the Pen ZyZvwv by PointC (@PointC) on CodePen

This should work above 1024 and stop working below that width. One other thing you'll probably have to add is seeking back to 0 on the timeline if the user resizes after they've scrolled beyond the animation on the page, but this should get you started.

 

Hopefully it helps. Happy tweening.

[pauljohnknight]

Thanks pointC.  

The enable and disable methods seem to be what I need.  I'll have a further play around - are these jQuery or Greensock methods?  I'm assuming they're not vanilla JS methods?

Paul

[PointC]

That's a ScrollMagic scene (or controller) parameter. It's a getter/setter. More info:

 

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

 

Happy tweening.