We Keep Coding

Text color in CSS Animation doesn't update with rest of content when 'theme toggle' is clicked on iOS

I have text that scrolls horizontally in a marquee style effect. This works great.
In addition to this I have a 'toggle' that when clicked adds the class .dark-mode to the html tag which basically inverts all the colours. So by default it's white page, black text. When toggled, black page, white text.
This works perfectly on my desktop browser. However I've noticed on iOS Safari and Chrome the text within the CSS Animation does not update with the rest of the copy. I haven't been able to test if that's the case on Android as well.
I've included the code for this but also put it on a CodePen here incase it's easier to view for people: https://codepen.io/moy/pen/eYjryXN
What's additional strange, if I scroll down the page then back up the text DOES change colour? Which indicates to me maybe once the animation is running, it leaving the viewport and re-entering somehow renders it again and corrects the colour?
I thought adding:
document.querySelector(‘.marquee’).offsetWidth;
Might force a 'reflow' of the page but it didn't do anything. Really appreciate some help on this. Strange one!
const html = document.querySelector('html');
const button = document.querySelector('.contrast__link');
button.addEventListener('click', e => {
e.preventDefault();
html.classList.toggle('dark-mode');
});
:root {
--color-primary: black;
--color-secondary: white;
--spacing: 24px;
}
.dark-mode {
--color-primary: white;
--color-secondary: black;
}
body {
background: var(--color-secondary);
color: var(--color-primary);
margin: 0 auto;
padding: 48px 24px;
max-width: 800px;
}
.marquee {
margin: 0 calc(var(--spacing) * -1);
margin-bottom: 120px;
}
.marquee h1 {
display: flex;
flex: 1 1 auto;
flex-wrap: nowrap;
overflow: hidden;
}
.marquee span {
-webkit-animation: 8s linear infinite 0s forwards running marquee;
animation: 8s linear infinite 0s forwards running marquee;
box-sizing: border-box;
flex: 1 0 50%;
padding: 0 var(--spacing);
white-space: nowrap;
text-align: center;
}
/**
* The looping animation for the marquee.
*/
#-webkit-keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
#keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
<div class="grid__item">
<div class="hgroup">
<div class="marquee">
<h1 class="page-title">
<span>Hello... is it me you're looking 404?</span>
<span>Hello... is it me you're looking 404?</span>
<span>Hello... is it me you're looking 404?</span>
<span>Hello... is it me you're looking 404?</span>
</h1>
</div>
</div>
<p class="contrast">Toggle Here</p>
</div>

IntersectionObserver defer script works in browser console & codePen not in WordPress site

got a problem with JS loaded to WordPress site. It's supposed to add a CSS class to an element entering viewport using IntersectionObserver to change the state of an animation from animation-play-state: paused; to animation-play-state: running !important;. After trying to change IDs to class, loading the script any possible way, wrapping it with $(window).load(), later defer the script to run after everything's loaded, the outcome is the same - it doesn't work. But it works if I paste it into Firefox browser console. What am I missing?
const svg = document.querySelectorAll('.animate-me');
observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.intersectionRatio > 0) {
entry.target.classList.add('viewAnim');
} else {
entry.target.classList.remove('viewAnim');
}
});
});
svg.forEach(svg => {
observer.observe(svg);
});
body {
font-size: 1em;
color: #ccc;
text-align: center;
padding-top: 30px
}
.scrollspace {
height: 850px;
font-size: 3em;
color: #333;
}
.container {
text-align: center;
padding-bottom: 60px;
}
#certIcon {
width: 240px;
position: relative;
top: 25px;
}
#line1, #line2, #line3 {
stroke-dasharray: 145;
stroke-dashoffset: 145;
animation: certline 3s ease forwards;
animation-play-state: paused;
}
#line1 {
animation-delay: 0.5s;
}
#line2 {
animation-delay: 1s;
}
#line3 {
animation-delay: 1.5s;
}
#keyframes certline {
to {
stroke-dashoffset: 0;
}
}
.viewAnim {
animation-play-state: running !important;
}
SVG icon animation with CSS starts on entering viewport
<div class="scrollspace">
SCROLL ON
</div>
<div class="container">
<p><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 131.1 129.23" id="certIcon" class="style-svg aligncenter replaced-svg svg-replaced-2"><path d="M54.25,92.82A15.4,15.4,0,0,1,54,71l.29-.29a15.77,15.77,0,0,1,11.08-4.58,15.32,15.32,0,0,1,11,4.58,15.68,15.68,0,0,1,0,22.08,15.32,15.32,0,0,1-11,4.58,15.77,15.77,0,0,1-11.08-4.58m31-14.17H81.07l.24-.08c.7-.27,1.89-.77,3.58-1.49s2.65-1.43,2.89-2.13a3,3,0,0,0-.36-2.41,4.33,4.33,0,0,0-1.57-2.17A2.4,2.4,0,0,0,84.24,70a11.78,11.78,0,0,0-2.77,1.33L78.66,73l.16-.32L81.63,70c1.33-1.28,2-2.28,2-3a6.65,6.65,0,0,0-1.36-2.25,4.28,4.28,0,0,0-3-1.28,10.17,10.17,0,0,0-2.44,2.09c-1.21,1.23-2,2.11-2.45,2.65l-.17.32v-.4c.33-.59.85-1.74,1.57-3.46s1-2.92.76-3.61a4.86,4.86,0,0,0-2.08-1.37,4.3,4.3,0,0,0-2-.4c-.7.22-1.46,1.18-2.29,2.89s-1.41,3-1.73,3.7c0-.75.07-2.06,0-3.94s-.28-3.08-.76-3.61a2.28,2.28,0,0,0-1.08-.44,6.59,6.59,0,0,0-1.33-.13,4.33,4.33,0,0,0-2.49.57c-.48.53-.74,1.74-.76,3.61s0,3.19,0,3.94v.24l-.08-.24c-.27-.75-.82-2-1.65-3.7s-1.62-2.67-2.37-2.89a4.46,4.46,0,0,0-2,.44,5.4,5.4,0,0,0-2,1.33c-.27.69-.06,1.9.64,3.61s1.2,2.87,1.52,3.46l.25.4-.41-.32c-.43-.54-1.23-1.42-2.41-2.65a9.33,9.33,0,0,0-2.32-2.11,4.67,4.67,0,0,0-2.89,1.28A5.17,5.17,0,0,0,46.94,67c0,.7.72,1.7,2,3s2.16,2.18,2.65,2.61l.32.32-.4-.16L49,71.29a16.22,16.22,0,0,0-2.57-1.37,2.84,2.84,0,0,0-1.77.48,4.89,4.89,0,0,0-1.61,2.17,3.84,3.84,0,0,0-.4,2.49c.27.65,1.26,1.33,3,2s2.92,1.22,3.62,1.49l.24.08h-.24a36.29,36.29,0,0,0-3.86,0c-1.86.07-3,.25-3.53.68a2,2,0,0,0-.52,1.08,8.39,8.39,0,0,0-.12,1.41,3.3,3.3,0,0,0,.64,2.33c.48.59,1.66.9,3.53.92s3.16,0,3.86,0L45.67,86.5c-1.71.69-2.7,1.34-3,1.92a4.58,4.58,0,0,0,.44,2.7,4.66,4.66,0,0,0,1.57,2.12,3.21,3.21,0,0,0,1.77.57A17.14,17.14,0,0,0,49,92.44L51.52,91l.4-.16L51.6,91c-.49.43-1.37,1.32-2.65,2.66s-2,2.32-2,3a4.22,4.22,0,0,0,1.36,2.17,4.33,4.33,0,0,0,2.88,1.44A9.3,9.3,0,0,0,53.6,98c1.18-1.34,2-2.22,2.41-2.65l.41-.16-.25.32c-.32.59-.83,1.74-1.52,3.46s-.91,2.86-.64,3.45a4.69,4.69,0,0,0,2,1.49,6,6,0,0,0,2,.52c.75-.22,1.54-1.19,2.37-2.93s1.38-3,1.65-3.66l.08-.24v.24a35.63,35.63,0,0,0,0,3.82c.07,1.82.29,3,.8,3.49a3.49,3.49,0,0,0,2.45.72,3.91,3.91,0,0,0,2.41-.72c.48-.48.73-1.65.76-3.49s0-3.12,0-3.82l1.66,3.64q1.2,2.64,2.25,3a5.33,5.33,0,0,0,2-.48,4.36,4.36,0,0,0,2.08-1.53c.22-.59,0-1.74-.76-3.45s-1.24-2.87-1.57-3.46v-.32L76.81,98a10.27,10.27,0,0,0,2.49,2.25,4,4,0,0,0,3-1.52,5.1,5.1,0,0,0,1.36-2.17c0-.65-.68-1.64-2-3s-2.29-2.23-2.77-2.66l-.16-.16,2.81,1.61a10.59,10.59,0,0,0,2.77,1.29,2.58,2.58,0,0,0,1.61-.49,4.51,4.51,0,0,0,1.61-2.12,4.14,4.14,0,0,0,.36-2.7c-.27-.58-1.23-1.23-2.89-1.92L81.31,85a38,38,0,0,0,3.94,0c1.88-.07,3-.32,3.45-.88a3.88,3.88,0,0,0,.64-2.41,4.09,4.09,0,0,0-.64-2.45c-.43-.43-1.58-.66-3.45-.68m-5,24.21a7.2,7.2,0,0,1-1,1.85A6,6,0,0,1,78,105.9,13.65,13.65,0,0,1,76.19,107a9.21,9.21,0,0,1-2.89.56,7,7,0,0,1-2.81-.56,6.44,6.44,0,0,1-1.45,1.2,7.46,7.46,0,0,1-7.46,0A11.81,11.81,0,0,1,60,107a5.62,5.62,0,0,1-2.65.56,9.32,9.32,0,0,1-3-.56,8.93,8.93,0,0,1-3.13-2.31,4.5,4.5,0,0,1-.8-1.85l-9.56,18.07,9.72.73,6.75,7.54L65.65,116,74,129.19l6.27-7.38,10-.89L80.91,103h-.24a.71.71,0,0,1-.4-.16" transform="translate(-0.05 0.03)" style="fill:#9d9d9c"></path><path d="M93.77,91.5H122.1a6.79,6.79,0,0,0,6.8-6.8h0V9a6.82,6.82,0,0,0-6.8-6.8H9.1A6.79,6.79,0,0,0,2.3,9V84.67a6.79,6.79,0,0,0,6.78,6.8H37.19" transform="translate(-0.05 0.03)" style="fill:none;stroke:#9d9d9c;stroke-linecap:round;stroke-width:4.5px"></path><line id="line3" class="line3 animate-me" x1="21.75" y1="42.33" x2="106.75" y2="42.33" style="fill:none;stroke:#e30613;stroke-linecap:round;stroke-width:3.4000000953674316px"></line><line id="line2" class="line2 animate-me" x1="21.75" y1="31.46" x2="106.75" y2="31.46" style="fill:none;stroke:#e30613;stroke-linecap:round;stroke-width:3.4000000953674316px"></line><line id="line1" class="line1 animate-me" x1="21.75" y1="20.59" x2="106.75" y2="20.59" style="fill:none;stroke:#e30613;stroke-linecap:round;stroke-width:3.4000000953674316px"></line><circle cx="65.19" cy="82.1" r="11" style="fill:#c6c6c6"></circle></svg></p>
</div>
codePen link
testSite link

so, I went with jQuery + waypoints.js instead of IntersectionObserver.
//load waypoints.js script: https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.min.js
var waypoint = new VcWaypoint({
//select svg
element: document.getElementById('animateMe'),
handler: function() {
//add css class with "animation-play-state: running; .."
jQuery('.animate-me').addClass('viewAnim');
},
// ..on entering viewport
offset: 'bottom-in-view'
})

How to stop a text animation from moving the logo when the text appears

I am making a mental health website. on the homepage of the website I have chosen to make a text that is animated as opposed to being static, just to make the website more lively and appealing.
this is what it looks like when the text appears.
The horizontal overflow is hidden, so the logo on the side is out of the page because the text has stretched.
How can I fix this?
// sets the interval for which the function will run, in this case 8 seconds, (8000)
setInterval(function() {
// grab all elements with class 'sub-head' and stores it in the elems const.
const elems = document.querySelectorAll('.sub-head')
// loop through the found elements
elems.forEach(e => {
// check if the element has a class 'inactive', if there is one, remove it
if (e.classList.contains('inactive')) e.classList.remove('inactive')
// if not, add it. This is how it creates a loop.
else e.classList.add('inactive');
});
}, 8000)
/* The animation text*/
.intro {
display: inline-flex;
overflow: hidden;
white-space: nowrap;
}
.intro1 {
animation: showup 7s;
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
color: purple;
}
.intro2 {
width: 0px;
animation: reveal 7s infinite;
}
.inactive {
display: none;
}
.sub-head {
margin-left: -355px;
animation: slidein 7s infinite;
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
}
#keyframes showup {
0% {
opacity: 0;
}
20% {
opacity: .4;
}
80% {
opacity: .8;
}
100% {
opacity: 1;
}
}
#keyframes slidein {
0% {
margin-left: -800px;
}
20% {
margin-left: -800px;
}
35% {
margin-left: 0px;
}
100% {
margin-left: 0px;
}
}
#keyframes reveal {
0% {
opacity: 0;
width: 0px;
}
20% {
opacity: 1;
width: 0px;
}
30% {
width: 800px;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
width: 800px;
}
}
<div class="first-box">
<div class="intro intro1">Welcome!</div>
<div class="intro intro2">
<span class="sub-head "> We care about you</span>
<span class="sub-head inactive">becuase you matter</span>
<!-- lol dramatic effect-->
</div>
</div>

I think the problem was you're setting so much width that the image/logo will also be affected by the width that you have set.
SOLUTION:
Set a static width on your .intro2 class for example 300px or reasonable width that will only fit your static content.
.intro2 {
width: 300px;
animation: reveal 7s infinite;
}
You can check on this pen https://codepen.io/Preygremmer15/pen/MWoJBzv

Wrap dynamic text around a spinning cylinder with CSS/Javascript (splitting.js)

I am fairly new to coding and don't have the in-depth knowledge to solve this problem on my own. I would be really grateful if somebody could help me out!
I am trying to wrap a dynamically loaded text without a fixed number of characters around a spinning cylinder using CSS and splitting.js. I tried following this tutorial and everything worked great until I started changing the text. The problem is that this method only works with text that doesn't change in length because it either gets cut off if the text is too long or a gap in the cylinder results if it is too short.
Here is the source code I have right now. Sadly it doesn't work properly when I paste it in jsfiddle. It does however work just fine in my code editor and is the same as in the tutorial I linked above.
<div class="circle" data-splitting>
Circle-Text-Animation-Effect-Cool-great
</div>
<script>
Splitting();
</script>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: monospace;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color:aqua;
}
.circle {
transform-style: preserve-3d;
animation: animate 8s linear infinite;
}
#keyframes animate {
0% {
transform: perspective(1000px) rotateY(360deg) rotateX(15deg);
}
100% {
transform: perspective(1000px) rotateY(0deg) rotateX(15deg);
}
}
.circle .char {
position: absolute;
top: 0;
left: 0;
background: red;
color: blue;
font-size: 4em;
padding: 5px 12px;
border: 4px solid black;
transform-style: preserve-3d;
transform-origin: center;
transform: rotateY(calc(var(--char-index) * 10deg)) translateZ(250px);
}
Is there any workaround for this problem? Maybe even without using splitting.js?
I hope I could describe my problem properly. English isn't my first language and I can't upload images to Stackoverflow yet so I wasn't able to describe the problem visually!
Thank you in advance for your help!
enter image description here

The trick here is to note that the number of degrees you need to rotate a character depends on the total number of characters in the string.
I don't have the splitter.js library so have put in a bit of JS which does the same thing - separates each character into its own div with a style that defines a CSS variable - the index of the character.
The JS also sets a new CSS variable, --numchs, which is used in the CSS to calculate the number of degrees to rotate each character, --deg. This is then used instead of the 10deg to decide where to place a character.
const circle = document.querySelector('.circle');
const text = circle.innerHTML;// Note I am being lazy here and assuming the string has no unwanted whitespace
circle.innerHTML = '';
circle.style.setProperty('--numchs', text.length);
for ( let i = 0; i < text.length; i++ ) {
circle.innerHTML = circle.innerHTML + '<div class="char" style="--char-index: ' + i + ';">' + text.charAt(i) + '</div>';
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: monospace;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color:aqua;
}
.circle {
transform-style: preserve-3d;
animation: animate 8s linear infinite;
--deg: calc(360deg / var(--numchs));
}
#keyframes animate {
0% {
transform: perspective(1000px) rotateY(360deg) rotateX(15deg);
}
100% {
transform: perspective(1000px) rotateY(0deg) rotateX(15deg);
}
}
.circle .char {
position: absolute;
top: 0;
left: 0;
background: red;
color: blue;
font-size: 4em;
padding: 5px 12px;
border: 4px solid black;
transform-style: preserve-3d;
transform-origin: center;
transform: rotateY(calc(var(--char-index) * var(--deg))) translateZ(250px);
}
<div class="circle" data-splitting>Circle-Text-Animation-Effect-Cool-great</div>

Recreating a text animation (source within)

I would like to recreate the text animation seen in this screen video I did of this website theme: http://themeforest.net/item/js-responsive-theme/full_screen_preview/7630276
Here is the video to show you the animation:
https://drive.google.com/file/d/0B3HFm_t_vjVpVUNiWVRVdW14aWs/edit?usp=sharing
I am unsure of where to begin and cannot find anything like it through my search so far, I am open to anything to create this such as jQuery. Thank you for any help!

I'd do this with two absolute positioned texts, one gray (or semi transparent) second one, on top set to overflow:hidden. Then I'd just animate the width of the second container.
How do You like the idea? :)
edit:
little tweaking, but idea the same - fiddle for You: http://jsfiddle.net/Lr4PQ/
quite important CSS rule:
white-space: nowrap;
to prevent breaking lines when width of text node is smaller than text's.
edit 2:
Of course, idea behind lets You to achieve the result using pure CSS, jQuery's role is just animating width.
HTML:
<div class="container">
<div class="text upper">You`re the boss</div>
<div class="text ">You`re the boss</div>
</div>
CSS:
body {
background:#000;
}
.container {
position:absolute;
left:30%;
top:20%;
width:auto;
/*position container as You wish*/
}
.text {
text-transform:uppercase;
font-family:sans-serif;
color:#FFF;
opacity:.2;
white-space: nowrap;
font-size:30px;
}
.text.upper {
position:absolute;
opacity:1;
overflow:hidden;
width:0%;
}
jQuery:
$('.text.upper').animate({width:'100%'},3000).animate({width:'0%'},3000);

The animation is achieved in pure CSS3:
jsBin demo
HTML:
<div class="modal">
<h1 data-content="YOUR BEAUTIFUL NAME">YOUR BEAUTIFUL NAME</h1>
</div>
CSS:
.modal h1 {
color: #626161;
font-size: 30px;
left: 50%;
margin-left: -125px;
margin-top: -15px;
position: absolute;
text-align: center;
top: 50%;
}
.modal h1:before {
animation: 5s ease 0s normal none 1 loading;
-o-animation: 5s ease 0s normal none 1 loading;
-ms-animation: 5s ease 0s normal none 1 loading;
-moz-animation: 5s ease 0s normal none 1 loading;
-webkit-animation: 5s ease 0s normal none 1 loading;
color: #E2E2E2;
content: attr(data-content);
max-width: 100%;
overflow: hidden;
position: absolute;
white-space:nowrap;
}
#keyframes loading {
0% { max-width: 0%; }
}
#-o-keyframes loading {
0% { max-width: 0%; }
}
#-ms-keyframes loading {
0% { max-width: 0%; }
}
#-moz-keyframes loading {
0% { max-width: 0%; }
}
#-webkit-keyframes loading {
0% { max-width: 0%; }
}
One of the reason they used a single h1 instead of overlaying two h1 elements and animating the second's one width is simply cause for a better SEO a page should contain only one h1 element. Also using content: attr(data-content); is quite fun so...