[Should I only use divs for SplitText?]

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

[Splittext randomly not breaking at <br>]

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?

[Splittext randomly not breaking at <br>]

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

See the Pen VwXqajR by sirhclluk (@sirhclluk) on CodePen

[jumpy splittext animations]

thank you both!

[jumpy splittext animations]

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

rather than

h1 {
    will-change: transform;
}

[jumpy splittext animations]

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

 

See the Pen WNMZrzW?editors=1010 by sirhclluk (@sirhclluk) on CodePen

[scrollTrigger with morphing shapes in 4 stages]

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

[scrollTrigger with morphing shapes in 4 stages]

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

 

See the Pen 2f6c10b227f0609c04548b6222d25d8a?editors=0010 by sirhclluk (@sirhclluk) on CodePen

[Using gsaps new random feature]

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

[Using gsaps new random feature]

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

[Using gsaps new random feature]

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

Thank You

See the Pen 7e062de5bfbf4331ef09f711f60ba25f by sirhclluk (@sirhclluk) on CodePen

[drawsvg dash continuously move around]

@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. 

[drawsvg dash continuously move around]

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. 

See the Pen mdyoMzO?editors=1010 by sirhclluk (@sirhclluk) on CodePen

[drawsvg dash continuously move around]

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

See the Pen MWYxQQN by sirhclluk (@sirhclluk) on CodePen

[PixiPlugin help]

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

See the Pen mGJEZW by sirhclluk (@sirhclluk) on CodePen

[svg objects flying off and vibrating after resize]

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. 

[svg objects flying off and vibrating after resize]

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

Please help...

Thanks

See the Pen 4141adfa61f04ec73bec205733f464d2 by sirhclluk (@sirhclluk) on CodePen

[DRAW SVG, direction]

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

[morph svg]

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.

[morph svg]

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

[SVG rotationX issue in safari and Firefox]

I had success removing the rotationX and keeping the transformOrigin.

 

See the Pen 27931bfac63637b1816c59318d473b2f?editors=0010 by sirhclluk (@sirhclluk) on CodePen

 

I tried svgOrigin, but it didn't improve it.

 

Thanks Jonathan

[SVG rotationX issue in safari and Firefox]

Hi Jonathan

Here is a better example. 

See the Pen efc1f8d6779e1bb06365c6e43796075c by sirhclluk (@sirhclluk) on CodePen

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")

[SVG rotationX issue in safari and Firefox]

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

See the Pen a59bc0d1c3e4bdff79855db149c13308?editors=0010 by sirhclluk (@sirhclluk) on CodePen

[Draggable controlling timeline]

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!

[Draggable controlling timeline]

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