Every time i resize the viewport, the backgroundImage of this DIV gets reset to the first image that i set before

[soon_to_be_codemaster]

I've reached my witts end here, I have been trying to solve this issue for the past hour or so but with no avail. I created an animation with GSAP that creates an illusion that you are zooming into a planet, then the planet will disappear and a random image of a lake with large rocks will appear and two text boxes appear, one of them with a button. Once you click on the button, the image of the lake and the two text boxes will disappear and another image of the night sky will take its place. Everything works well up to this point, however, when I resize the viewport, the image of the night sky disappears and the image of the large rocks appears again when it shouldn't. I've included the CODEPEN for this but I can't recreate the bug/error.

gsap.timeline({
        scrollTrigger: {
            trigger: ".earth_container",
            start: "-20% 0%",
            markers: false
        }
    })
    .to(".earth_planet", {
        width: "+=2500",
        height:"+=2500",
        duration: 3
    })
    .set(".earth_container", {
        backgroundImage: "url('https://i.postimg.cc/Dy9ryPpB/earth-forest.jpg')",
        backgroundSize: "cover"
    })
    .to(".earth_planet", {
        opacity: 0
    })
    .from(".text_info_box_earth_one", {
        opacity: 0
    })
    .from(".text_info_box_earth_two", {
        opacity: 0
    });

the timeline above executes automatically and the code below is only executed when the user clicks on the button "Night Time".

As i stated before, everything works fine to this point, but once i resize the window AFTER i click on the "Night Time" button, however,  the backgroundImage of the ".earth_container" reverts back to the image of the lake, when it shouldn't... why do you think this is happening?

function change_to_night_earth() {
    let newHTML = "The night sky is just as beautiful " +
    "as the the day time sky. Millions of stars in every " +
    "corner of the sky. There may be less light, but there isn't " +
    "less beauty at this time of the planet";

    let new_HTML = "Click the button below if you want to return to " +
    "the day time of earth..." + "<br><br>" +
    "<button type='button' class='btn'> Day Time </button>";

    gsap.timeline()
    .to(".text_info_box_earth_one", {
        opacity: 0
    })
    .to(".text_info_box_earth_two", {
        opacity: 0
    })
    .to(".earth_container", {
        opacity: 0
    })    
    .set(".text_info_box_earth_one", {
        innerHTML: newHTML,
        attr: {class: "text_containers_white text_info_box_earth_one transitioning_fast"}
    })
    .set(".text_info_box_earth_two", {
        innerHTML: new_HTML,
        attr: {class: "text_containers_white text_info_box_earth_two transitioning_fast"}
    })
 //-----this is propbably where the error happens----------------------------------------------
    .set(".earth_container", {
        backgroundImage: "url('https://i.postimg.cc/x8km9XKw/earth-night.jpg')",
    })
 //----------------------------------------------------------------------------------------------
    .to(".earth_container", {
        opacity: 1
    })
    .to(".text_info_box_earth_one", {
        opacity: 1
    })
    .to(".text_info_box_earth_two", {
        opacity: 1
    })
}

See the Pen MWQvVdd by abelmuro (@abelmuro) on CodePen

[GreenSock]

Welcome to the forums, @soon_to_be_codemaster. Sorry to hear about the frustration. 

 

Just so I understand correctly, you're saying that the CodePen works perfectly, right? If you can't provide a minimal demo that allows us to see the problem, it's super difficult for us to troubleshoot. 

 

Do you have the latest version of GSAP/ScrollTrigger locally? I wonder if it's as simple as updating your file(s). 🤷‍♂️

[soon_to_be_codemaster]

Ah you were right, I did NOT have the latest version of Scrolltrigger on my website. Thank you for your speculation. I updated to the latest version of Scroll trigger and that solved my problem. Thanks again!