jsciumi

ShockinglyGreen
  • Content Count

    8
  • Joined

  • Last visited

Community Reputation

2 Newbie

About jsciumi

  • Rank
    Newbie
  1. jsciumi

    changing color one word at a time

    Perfect!!! Thank you!
  2. jsciumi

    changing color one word at a time

    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
  3. jsciumi

    SplitText chars of each li in each ul

    @PointC Yes!! That works! Thank you so much!
  4. jsciumi

    Help with SplitText chars with serif font

    @GreenSock Perfect! Thank you all so very much!
  5. jsciumi

    SplitText chars of each li in each ul

    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!
  6. jsciumi

    Help with SplitText chars with serif font

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

    Help with SplitText chars with serif font

    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"
  8. 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!