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