Please help me custom animation

hello i want to add animations onto my button so when the button is clicked it hides two things and shows one. i figured i can do this 3 different ways

  1. display: none
  2. animation move + masking
  3. animation scale
  4. animation opacity

i decided to use animation opacity and tried to grab info from other forums to help me write my code`:

<script src=""></script>
        window.addEventListener("load", () => {
            // Ensure jQuery is loaded

            // Define the button and iframe elements
            var button = $("[data-id='6647c5cb89fbf6002eb1d3f0']");
            var iframe1 = $("[data-id='6647cac6fe9b2c0035c61695']");
            var iframe2 = $("[data-id='6647cb089ff61c0044d5aa40']");

            var time = 300;

            // Add click event listener to the button
            button.on('click', function(){
                iframe1.stop(true, false).animate({"opacity": 0}, time);
                iframe2.stop(true, false).animate({"opacity": 0}, time);


this is what i came up with and put it in my projects code i tried placing in the beginning of the body or the end but nothing is working although when i put this code in jsfiddle it works perfectly. i dont know whats inhibiting my code from working can someone please help me!!!

Image to hopefully better explain what im trying to do:


I noticed, that, the event listener “load” isnt firing inside RM… for what reason ever…
try to wrap your code inside a setTimeout of maybe 2 secs.

your code looks good though.