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

Thanks for looking at it PointC. Using chrome. Here is a screenshot during the unwanted shaking. So when the finger goes back to swipe, the icon shakes.

After resizing this animation, the icons that are rotating do a weird vibrating thing. And sometimes the finger flies off. Please help... Thanks

Thanks PointC. The illustrator trick of reversing the path in Attributes did the trick

thanks carl. Asking because google web designer removed the ability to add svg code into the html. sucks since I started using animated svgs on almost all of my banners. your link does have good info on it.

Does morph and draw svg only work with the code of the svg? So if I have two traditional svgs as images, can that work? Thanks

I had success removing the rotationX and keeping the transformOrigin. http://codepen.io/sirhclluk/pen/27931bfac63637b1816c59318d473b2f?editors=0010 I tried svgOrigin, but it didn't improve it. Thanks Jonathan

Hi Jonathan Here is a better example. http://codepen.io/sirhclluk/pen/efc1f8d6779e1bb06365c6e43796075c So when his right arm bends is the big difference. This is the first line with rotationX, .to(Bald_bicept_RT, .5, {rotation:45, rotationX:45, transformOrigin:"60% 5%", ease:Sine.easeOut}, "armR+=1.2")

I think my issue is with rotationX. Is there a trick to getting rotationX with an SVG to work in Safari and Firefox? My codepen is linked. Thanks

Thank you both for the replies. PointC, I got it to work based on that example. I had to change the bound to numbers and not just the name of the object. And on the progress line had to change it to t.progress( this.x/-484 ); Thank You GSAP!

Is this possible with Draggable? In a banner I want to drag a road jpg horizontally, and have a car move along the road as I drag the road jpg. So the car stays in the same spot horizontally, just moving up and down and turning as needed. if it is possible could someone share a link related to it? Thanks