Jump to content

Start stop CSS animation - multiple elements

Recommended Posts

Hi, I have the following. 

  • 2 images, one gif (.running), one still (.paused).
  • Headline within an animated div that blinks.

I have the following code that works a treat for the images. (click the image, hide it and show the other)
However, I want to use the same click events to also change the divs animation play state, from running to paused, but I'm missing something when calling the div and it doesn't work. I'm a javascript novice.

Could I please get some advice on where I'm going wrong?

Url mrwatt.co.uk

<script>
const workmix = document.getElementById("#block-yui_3_17_2_1_1701277236499_87692");
  
 $(function() { 
  $('.paused').hide();
  $('.running').click(function() {
    $('.running').hide();
    $('.paused').show();
    workmix.style.animationPlayState = "paused";
  });
  if ($('.running').data("clicked", true)) {
    $('.paused').click(function() {
      $('.running').show();
      $('.paused').hide();
      workmix.style.animationPlayState = "running";
    });
  }
});
</script>
#block-yui_3_17_2_1_1701277236499_87692 {
  animation: blinker 4s step-start infinite;
}

@keyframes blinker {
    38%, 58%, 78% {
    opacity: 0;
  }
   28%, 48%, 68% {
     opacity: 1;
   }
}
<div class="sqs-block html-block sqs-block-html" data-block-type="2" id="block-yui_3_17_2_1_1701277236499_87692"><div class="sqs-block-content">
	<div class="sqs-html-content">
  		<div class="sqsrte-scaled-text-container loaded"><span class="sqsrte-scaled-text" style="font-size: 266.4px;"><h1 style="white-space:pre-wrap;">Work mix</h1></span></div>
	</div>
</div>



<div class="introLoaderTape">
  <img class="tape running" src="https://mrwatt.co.uk/s/Cassette_mov_128.gif" width="100%"/>
  <img class="tape paused" src="https://mrwatt.co.uk/s/Cassette_mov_128_still.gif" width="100%"/>
</div>

 

Edited by mrpower
spell check
Link to comment
  • Replies 0
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.