Fade background from right to left

Question

I managed with the help of the ScrollMagic library to change my background img for my section three-section-container depending on scroll position. Additionally, I managed to add an overlay that will appear only when I am on a certain section of my page.

My issue now is that I would like to animate how background image changes (I want to come from right to left and stay positioned in the middle/ as you can see in code the background is changing 2 times). I tried with `transform: translateY(40px); property in CSS but the result was inconsistent because the image would not be 100% of my screen. Also, I want my overlay to come from left to right, and I am quite confused how.

HTML
  <div id="bigSection" class="three-section-container  ">
          <div id="target-overlay" class=" "></div>
            <div  class="sec1  " id="project01"></div>
            <div class="sec2 "  id="project02"></div>
            <div class="sec3" id="project03"></div>
          
        </div>

CSS
.three-section-container{
  position: relative;
background-color: black;
transition: all 3s ease;
background-image: url('../../Assets/Images/graphic/last/poza-augmented-reality.png');
background-repeat: no-repeat;

background-color: black;
background-size: 100% 100vh;
background-attachment: fixed;
 
  
}

.fade-img1{
  transition: all 1s ease;

  background-image: url('../../Assets/Images/graphic/last/poza-augmented-reality.png');
  background-repeat: no-repeat;
 
  background-color: black;
  background-size: 100% 100vh;
  background-attachment: fixed;
  // transform: translatey(20px);
  opacity: 1;
 margin: 0;
 z-index: 999;
}

.fade-img2{
 
  background-image: url('../../Assets/Images/graphic/last/2.png');
  background-repeat: no-repeat;
 
  background-color: black;
  background-size: 100% 100vh;
  background-attachment: fixed;
  opacity: 1;
  transition: all 1s ease;
 margin: 0;
 z-index: 999;
 
}
.fade-img3{
 
  background-image: url('../../Assets/Images/graphic/last/poza-interior.png');
  background-repeat: no-repeat;
 
  background-color: black;
  background-size: 100% 100vh;
  background-attachment: fixed;
  // transform: translateY(40px);
  opacity: 1;
  transition: all 0.3s ease;
 margin: 0;
 z-index: 999;
}
.sec1, .sec2, .sec3{
  height: 100vh;
}

.overlay {
  transition: 0.3s linear all;
  position: absolute; /* Sit on top of the page content */
  width: 40%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
  z-index: 999; /* Specify a stack order in case you're using a different order for other elements */
}

JS

$(document).ready(function(){
    var controller=new ScrollMagic.Controller()
// build a scene

var ourScene= new ScrollMagic.Scene({
    triggerElement:'#project01',
    duration:"100%"
})
.setClassToggle('#bigSection', 'fade-img1')
.addIndicators({
    name:'fade scene',
    colorTRigger:'black',
    indent:200,
    colorStart:'#75c695'
})
.addTo(controller)
var ourScene= new ScrollMagic.Scene({
    triggerElement:'#project02',
    duration:"100%"
})
.setClassToggle('#bigSection', 'fade-img2')
.addIndicators({
    name:'fade scene',
    colorTRigger:'black',
    indent:200,
    colorStart:'#75c695'
})
.addTo(controller)

var ourScene= new ScrollMagic.Scene({
    triggerElement:'#project03',
    duration:"200%"
})
.setClassToggle('#bigSection', 'fade-img3')
.addIndicators({
    name:'fade scene',
    colorTRigger:'black',
    indent:200,
    colorStart:'#75c695'
})
.addTo(controller)



var ourScene= new ScrollMagic.Scene({
    triggerElement:'#project01',
    // duration:"200%"
})
.setClassToggle('#target-overlay', 'overlay')
.addIndicators({
    name:'overlay',
    colorTRigger:'black',
    indent:200,
    colorStart:'#75c695'
})
.addTo(controller)




})

Any help is welcomed. Thank You

Answer 1

I'm not familiar with the ScrollMagic API but I think this code snippet can make things a little cleared from the JS and CSS prospective involved in the animation.

In fact most of them can be done without the need of externals API but just triggering back an forth a CSS class !

Hope this helps you a little bit:

 let animationDone = false; window.addEventListener("scroll", () => { /* * IF you scrolled more than a certain amount: * in this case i choose half a page height's (50vh), * you trigger the slide animation by adding the onscreen class to the background2 div. * Otherwise if you previously triggered the animation and * you scrolled in the opposite direction: the animation is triggered backwards. */ if(window.scrollY > window.innerHeight / 2) { document.getElementsByClassName("background2")[0].classList.add("onscreen"); document.getElementById("secondPage").classList.add("onscreen"); animationDone = true; //We makes sure that we always know the state of our animation } else if(animationDone) { document.getElementsByClassName("background2")[0].classList.remove("onscreen"); document.getElementById("secondPage").classList.remove("onscreen"); animationDone = false; //We makes sure that we always know the state of our animation } }, {passive:true});

 body { color:white; margin: 0; width:100vw; height:200vh; /* 200vh is only for demo purposes: it allows to scroll the html body even thought there's nothing inside */ } #mainContent { text-align: center; z-index: 99; position: absolute; } #mainContent > * { display: flex; justify-content: center; align-items: center; } #firstPage { width: 100vw; height: 100vh; } #secondPage { width: 100vw; height: 100vh; opacity: 0; /* This makes our background2 div transparent as soon as its hidden */ transform: translateX(-100vw); /* This shifts our background to the left by 100vw (its width) */ transition: 1s; /* The page content animation's duration */ } #secondPage.onscreen { /* * This cancels the second page's previous shift (to left) when the onscreen class is applied to secondPage div * in 0.3s so that it won't snap-> the left to right transition is realized: */ transform; translateY(0): opacity; 1. /* This makes our background2 fades from transparent (its original state) to opaque */ }:background1 { z-index; 1: /* Lower stacking index than the other background to hide it */ position; fixed: width; 100vw: height; 100vh: background; red. }:background2 { z-index; 2: /* Higher stacking index than the other background to show it*/ position; fixed: width; 100vw: height; 100vh: background; blue: opacity; 0: /* This makes our background2 div transparent as soon as its hidden */ transform; translateX(100vw): /* This shifts our background to the right by 100vw (its width) */ transition. 0;3s. /* The background2 animation's duration */ }.background2.onscreen { /* * This cancels the background's previous shift when the onscreen class is applied to background2 * in 0:3s so that it won't snap-> the right to left transition is realized; */ transform: translateY(0); opacity: 1; /* This makes our background2 fades from transparent (its original state) to opaque */ }

 <body> <div id = "mainContent"> <h1 id = "firstPage">The main content goes here</h1> <h1 id = "secondPage">Animation Triggered !</h1> </div> <div class = "background1"></div> <div class = "background2"></div> </div> </body>