sirhclluk

Are there any issues animating h1 <h1 id=“txt1”>SplitText <br>text.</h1>, or is it best practice to always use divs <div id=“txt1”>SplitText <br>text.</div> when animating with splittext? Thanks

Yes, but this is just an example. Do you see any issues with how it is set up, that could cause the <br> to not work?

I've been having issues recently using splittext in banners. The issue is the text isn't always breaking at the <br>. Not so much an issue with Chrome, but still randomly happens. I see the info on this page https://greensock.com/docs/v3/Plugins/SplitText at Notes & limitations, but maybe you could help me more here. Is there an issue where I have these placed? My links to google fonts are pasted just before the end of the </head> My links to js files are just before the end of the </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script> <script src="js/SplitText.min.js"></script> <script src="js/greensock_Animations.js"></script> Thanks Chris

thank you both!

That does look better. What's the advantage of adding h1 > * { will-change: transform; } rather than h1 { will-change: transform; }

Is there something I'm doing wrong in this splittext example? The text animation is not the usual buttery smooth gsap I'm used to. Thanks

Wow mvaneijgen, you are a magician. As you can see I know just enough to be dangerous. I didn't know I could target all rect and circs in the svg. What is this clearing? console.clear(); Thank You. You deserve a reward. Chris

In this I'm using scrolltrigger with a million different shapes morphing in 4 stages. If you scroll slowly there is no issue. But scrolling up and down several times the shapes start flying off. I have the scrolltrigger on the master timeline, with 8 timelines within it. Thanks for any help. Chris

Thanks Jack. I look forward to that one. Great work!

Thanks @ZachSaucier Yeah I didn't think about the repeat refresh. Even if mine did work, I'd never see the random change. Thank you

I can't get the random to work. Any help would be so awesome. Thank You

@Shrug ¯\_(ツ)_/¯I was thinking about what was going on in the art, and tried the overlap as a test. I saw the result was promising and tweaked the length a few times, and thats it.

Thanks @ZachSaucier That example is beautiful. But it's too much dev work for me to really grasp. After playing around with it for a while I was able to get what I wanted by overlapping the beginning and end of the Illustrator art. Here is what I have. https://codepen.io/sirhclluk/pen/mdyoMzO?editors=1010

Is there a way to have the dash continuously move around without that glitch when the end and starting point meet? I forked one of your pens. Thanks

I've looked at https://greensock.com/docs/Plugins/PixiPlugin and the codepen example. Could someone break it down super simple for me? What's the minimum code I need to blur the image using pixijs? Thank You! Chris