Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

celli last won the day on January 3 2016

celli had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by celli

  1. Can I do both? Can I revert the text so that it is not split into individual letters on scrollEnd, while also keeping it ready to split again in reverse when I scroll back up? The problem that I seem to keep having is when the letters are split into individual letters in the DOM, the tendency is that words break onto separate lines, in the middle of a word, leaving lone letters or parts of words on individual lines, depending on the viewport size.
  2. It shouldn't be private, here is another link: https://codepen.io/celli/pen/mdVMOjr ahh, I must have added it within my scrollTrigger previously, I added it to the TL now (at the bottom of the JS) and it does look to be working But it doesn't animate back in reverse now when scroll back up...
  3. I think I understand, but does that convert the HTML characters back to the original format ? I checked the previous pen and it didn't look like that was happening when I inspect the HTML, and when I tried it here I couldn't get it to work.. This pen doesn't use the child and parent splitTexts, only one, without the masking technique. On a standard splitText, I use revert like this... var tlSplitGreat = gsap.timeline({onComplete: () => {SplitGreat.revert()}}), ... and it changes the characters in my HTML back to one piece after the splitText is finished, but while using
  4. Hi Zach, I am still having a little trouble understanding how to use the eventListener "refresh" with the splitText revert() to format my text characters so the text is not all split in my HTML after the splitText and scrollTrigger end. I have a new codePen that I've been working on with a basic splitText tied to scrollTrigger, and my revert instance is all the way at the bottom ScrollTrigger.addEventListener("refresh", function() { SplitBurrowing.revert(); }); new CodePen https://codepen.io/celli/full/mdVMOjr I tried wrapping my code in
  5. Thanks Zach, I will study this and see how it's done, thanks it is great.
  6. Hi Zach, Yes, after the split, is when I mean the words break. If I want to keep it responsive and retain the transition, like you mention, I can add the re-splt to the scrollTrigger's refresh, but where exactly do I add the scrollTrigger's refresh ? I tried with the refresh method, but I probably am not including it in the right place in the code in my codePen ScrollTrigger.addEventListener("refresh", function() { splitTextTl.revert(); childSplit.revert(); });
  7. Hi Zach, One more quick question: 1. I updated my codePen -- and because I am using scrollTrigger, I couldn't seem to get the animation to reverse and replay when I scrolled back up and then down again. So I removed this part, which now makes it work as expected : // Remove the extra markup when it's done onComplete: () => { splitTextTl.revert(); childSplit.revert(); } Is there any harm in removing that ? I assume it's okay to leave the text split, and not revert back to the original HTML. The other thing I am wondering is with
  8. Ahh, great! I thought there would be a streamlined GSAP way. Thank you Zach!
  9. Hi, Is there a best way to achieve overflow:hidden on each character while using split text ? I have the characters in my codePen animating their y-position and would like them each to appear hidden (masked) before they animate into position. I can add overflow:hidden to my css, but that would only effect the bottom line of my text. I'd like to effect each line of text, since some of the text will wrap onto multiple lines.
  10. Great, thanks Zach! Just was wondering if something maybe has changed since.
  11. Hi, I animated an inline SVG with GSAP and it works really well—but now I am thinking that maybe I'd like to reference the SVG and not have the SVG inline because my HTML document get's pretty long. Is there a best approach with GSAP 3 to reference the IDs and classes within the SVG file, or best practices to use in general that would work cross browser ? I have a lot of IDs to reference, so I'm just wondering if there is a best approach to keep my GSAP code intact
  12. Thanks Zach ! and apologies for the basic question, I should have figured that part out.
  13. I am trying to use the helper function to pull a random element from an array that's not the PREVIOUS one that was pulled. I can't seem to figure out how to implement it into my gsap timeline. I tried referencing the function 'getRandomFrom' and then inserting my array just like using the random function, but I can't seem to get it work. Any help is appreciated.
  14. cool, thanks! I was going to see if the element(s) exist, but figured I'd ask about these. thanks!
  15. Hi, Do I need to worry about messages like these (pasted below) that come up in the console ? GSAP target [object Object] not found. https://greensock.com gsap-core.js:52 It is because it can't find the element that is referenced in my GSAP .js, but I have many pages that reference this .js file and the page that it's throwing this in the console happens not to have this element on that page, and I don't really want to make separate .js files for each .html page. Is there a way to suppress them in production, or do I need to worry about these types
  16. perfect, that worked ! I knew it had to be something simple. I didn't realize that. Thanks!
  17. I can get GSAP3's splitText plugin working fine on CodePen with the CodePen plugin URL https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js I have a Greensock membership, so I have the plugin hosted and local -- but it throws and error, even if I use my hosted plugin URL on CodePen. I tried registering the plugin like this gsap.registerPlugin(SplitTextPlugin); I still get this error on the SplitText.js file : "Uncaught SyntaxError: Cannot use import statement outside a module" Then of course I get the error that SplitText is n
  18. ahh, got it. Okay, thank you!
  19. Hi, I seem to be getting an error in the console (pasted below) Invalid property onOverwrite set to undefined Missing plugin? gsap.registerPlugin() This happens when my scrollMagic trigger is activated. If you scroll up on the codePen with the console open, you can see it. I removed all of the properties one-by-one, but I still seem to get the error, although it still executes the code. Does anyone know whats wrong with my code or the reason why ?
  20. Cool, thanks Carl and Zach!
  21. ahh, I didn't think of that. That's awesome! So there is only one letter at a time before staggering.
  22. Hi Zach, Sorry about that! Here is a quick animated GIF to show what I mean
  23. That's really cool, Carl! I am watching the video now. But I still want the first letter to appear first, like the way a regular text box works when you type using centered text in photoshop or illustrator. The first letter still starts out the sequence... Can I still use something like these advanced staggers work ?
  24. Is there a trick to starting GSAP splitText from the center ? The text is centered, but it seems to start/stagger from the left. I was trying a stepped ease, and changing the width of my text element's div, but I couldn't seem to get it right.