Changing Tween settings upon window resize makes parallax images jump

[Ingvar]

Hey everyone,

 

First thing, I'm sorry I can't provide a Codepen link, but my code involves fullscreen activation and I couldn't make it work there. I'l try my best to explain and provide code extracts

 

- Context -

I'm building a page displaying comic strips, and some of the images have parallax effects on vertical scroll. My page also offers the option to go fullscreen, but then the parallax images positions are a bit off (because my images are very high, and higher screen size = you see the images too early).

 

- My solution -

I created a function that checks if the page is on fullscreen, everytime the window size changes with 'window.onresize'. If the window is not fullscreen, then apply these Tween settings and if it's on fullscreen, apply those other ones.

 

- The problem -

The solution seems to be working fine when the window is not fullscreen. When I switch to fullscreen and scroll down the parallax is well positionned,  but if I scroll up the image makes a jump. I tried modifying the duration, from, to and triggerHook parameters, but as soon as the fullscreen setting is a bit different from the regular one, the image starts jumping.

 

------------------------

 

- My Code -

  ////////////////////////////////////////////////////////////////////////////
  // SCREEN SIZE DETECTION
  ////////////////////////////////////////////////////////////////////////////
  
  // Function 'resized' is triggered every time the window is resized, no matter in what way

  window.onresize = resized;

  function resized() {
    
    if( window.innerHeight >= (screen.height * 0.90) ) {
      fullScreen = true;
    }
    else {
      fullScreen = false;
    }
    
    refreshParallaxes();
  };
  
  
  ////////////////////////////////////////////////////////////////////////////
  // PARALLAX
  ////////////////////////////////////////////////////////////////////////////

  let fullScreen = false;

  var controller = new ScrollMagic.Controller({vertical: true});

  // Launching the function for the first time the page loads, not in fullscreen
  refreshParallaxes();

  function refreshParallaxes() {

    if( !fullScreen ){
      var slideParallaxScene = new ScrollMagic.Scene({
          triggerElement: '.toad',
          triggerHook: 1,
          duration: '220%'
      })
      .setTween(TweenMax.fromTo('.foreground-toad', 1, {y: '35%', ease:Power0.easeNone},{y: '-3%', ease:Power0.easeNone}))
      .addTo(controller)
    }
    else if( fullScreen ) {
      var slideParallaxScene = new ScrollMagic.Scene({
        triggerElement: '.toad',
        triggerHook: 1,
        duration: '220%'
      })
      .setTween(TweenMax.fromTo('.foreground-toad', 1, {y: '30%', ease:Power0.easeNone},{y: '-8%', ease:Power0.easeNone}))
      .addTo(controller)
    }
  }

    // THE PROBLEM HERE IS THAT WHEN ANY VALUE CHANGES BETWEEN THE TWO TWEEN SETTINGS, THE FULLSCREEN ONE STARTS JUMPING

 

------------------------

 

The solution seems to be half working since on fullscreen, the images are now well positionned, following the the second Tween settings. It's just that they jump upon up-scrolling.

 

Any ideas why the jumps? What am I doing wrong?

 

Thanks in advance for your help, and don't hesitate if something's not clear in my post.

?

[PointC]

It's pretty tough to troubleshoot without a demo and this seems like a ScrollMagic problem rather than a GSAP issue. ScrollMagic uses GSAP, but it is not a GreenSock product.

 

You may want to look at the ScrollMagic refresh() method.

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

 

You could also skip ScrollMagic and look at using the Intersection Observer.

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

 

You could also post your ScrollMagic question here:

https://github.com/janpaepke/ScrollMagic/issues

 

Happy tweening.