djacobs

Thanks for the reply. I think i can get the first panel to fit with innerHeight, and the second panel doesn't need to fit. Then, if I can use innerHeight as the value to offset ScrollToPlugin, and center the #cashback element, it seems like there shouldn't be a jump? But how I center #cashback with the value of innerHeight on the second slide? I see that #cashback is getting inline styles, but I can't figure out where they are coming from or how to edit them. Overall, I'm wondering if I can re-create the following screens, with a ScrollToPlugin animation between them, without them having an unsightly jump on scroll. It seems like getting the innerHeight value and coding everything around this would allow me to achieve this, but maybe I am missing something.

That makes sense. Could I get the innerHeight when the device first loads - Then, use that value for the panel height? And also use that value to center cash back? So instead of centering it in the screen, you would keep it centered in the middle of the original innerHeight value. Would something like this work? Alternatively, could you elaborate on your idea about the position fixed container setup? Thanks for the help.

Hi there, I am trying to set up a pin animation. The bug happens on mobile when there is a chrome or safari nav bar. #cashback is pinned to the center of the screen, but whenever the native nav bar appears or disappears, cashback re-centers itself and makes an ugly jump. How can I make it so that the pinned element #cashback doesn't re-center when the ios nav bar appears/disappears? Best, (The attached mov file shows the issue) Screen Recording 2021-07-13 at 8.10.15 PM.mov

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();

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!