jsciumi

Perfect!!! Thank you!

Hi again I'm looking to get each of my "keywords" to change to a highlighted color (I just used red in the pen for simplicity) as the subsequent list items fill in. I think I may have made this task a little harder on myself by having previously done SplitText on the phrase and animated color initially by character? Something with specificity of the divs? I'm stumped. I did include a little "y" bump in my pen just to make sure I was able to target the correct keyword--it's just the color changing that I can't get to work. Thank you so much! Jen

@PointC Yes!! That works! Thank you so much!

@GreenSock Perfect! Thank you all so very much!

Hi again, my heros! Okay, so, I'm looking for a more dynamic way to accomplish this. I have a bunch of unordered lists that each need to animate-in separately (corresponding with some highlighted words in an h1), and I would like to animate them in by character, but also be able to pause after each line (list item) has completed. I know I can do this with a bunch of SplitTexts, but I'm positive there's a better way to do it than going line by line, right? In my Pen, each unordered list comes in line-by-line. What I would like to do is: 1. animate first keyword 2. stagger by-character first list item of first list 3. pause 4. stagger by-character second list item of first list …repeat for all list items of first list, then repeat all for next keyword and next list. A loop of some sort, perhaps? Thanks!

Ooh! Just tested in Windows and it worked! So maybe that can help narrow things down at least!

First, thank you all so much for the help! Unfortunately, I'm still not seeing any improvement. @Carl, @GreenSock I've updated my Pen to include both of these potential fixes, namely: 1. wrapping js in: document.addEventListener("DOMContentLoaded", function(event){ window.addEventListener("load", function(event){ window.requestAnimationFrame(function(){ // code here }); }); }); 2. adding kerning css (I even added to p#tagline div just in case) p#tagline { font-size: 5rem; font-family: "Playfair Display", serif; font-kerning: none; -webkit-text-rendering: optimizeSpeed; text-rendering: optimizeSpeed; } p#tagline div { font-kerning: none; -webkit-text-rendering: optimizeSpeed; text-rendering: optimizeSpeed; } @Jonathan I'm running macOS High Sierra Version 10.13.6 and viewing in Safari Version 11.1.2 (13605.3.8). I've also included a screenshot of the "incomplete" "f"

Hi all! Quite desperate for some help on this! And a bit worried that there might not be a solution. I'm using SplitText (by character) with a serif font and the bits that overlap the next character (in my Pen it's the "f" in "transform") and that bit doesn't fill in until after the entire staggerFrom has completed. Any ideas? Thank you so much!