[Splittext wrap lines in lines?]

I made this function

 

function wrap(el, wrapper) {
  wrapper = document.createElement('div')
  wrapper.className = 'text-reveal-transform-wrapper'
  el.parentNode.insertBefore(wrapper, el)
  wrapper.appendChild(el)
}

 

And then loop throught splitText output. Seems like solution!

[Splittext wrap lines in lines?]

Hello!

 

I am trying to achieve similar text up/down transformY reveal effect as this examples

 

https://thisiscrowd.com/

https://www.makereign.com/studio

 

For this effect I need a parent div for every transformed element with overflow: hidden. 

 

I tried 

 

type: 'lines, lines'

 

But unfortunately this doesn't work. Is there any workaround?

 

See the Pen aPJpRd by dubdub (@dubdub) on CodePen

 

See the Pen aPJpRd by dubdub (@dubdub) on CodePen

[Set transformOrigin not working as expected]

@GreenSock thank you, now it's perfectly clear! SVG nuances are so confusing, really appreciate your support!

[Tweenmax set translateX not working as expected, why?]

@Carl yes, that's the case. I thougt it was parent %? because anime.js behaves this way. Thanks for the link! So much to learn!

 

@mikel thank you for your explanation. Didn't know that...

 

I am, like, writing down your every answer, guys ?

[rotationY not working!]

@Carl thank you, didn't know that! SVG has so many secrets ?

 

Incredibly enlightening, can't believe how much time I needed to spent to figure this out myself, so THANK YOU again.

 

Then probably I could make another animation for this.

[rotationY not working!]

Guys, sorry for third issue, but I have no idea what is going on! 

I have the same animation with anime.js and it's working no problemo.

Trying to migrate to GSAP and have this issues over and over.

 

See the Pen MZKRNN by dubdub (@dubdub) on CodePen

 

Why rotationY doesn't apply?

 

(the second issue here transformOrigin doesn't set by TweenMax.set properly, but I already created dedicated topic about this)

See the Pen MZKRNN by dubdub (@dubdub) on CodePen

[Tweenmax set translateX not working as expected, why?]

@mikel looks like it, yes! Thanks!

 

One more question please - I thought if I set it in number then it's pixel values. But it doesn't looks like this 100px in this case.

[Set transformOrigin not working as expected]

I am setting  transformOrigin to 

 

'50% 100% 0px'

 

 

But insted it set's it to 

 

    transform-origin: 0px 0px 0px;

 

Which means my rotateY transition is broken. Not sure why this happens?

 

See the Pen xmZBam by dubdub (@dubdub) on CodePen

 

See the Pen xmZBam by dubdub (@dubdub) on CodePen

[Tweenmax set translateX not working as expected, why?]

@mikel hello. I don't really need it for `e` letter. I need it right in the middle of the block. Beside, you have it hardcoded in pixels, if I understand, which is also not what I am searching. I need transfrom brackets to the middle

[Tweenmax set translateX not working as expected, why?]

While playing I noticed that `x: '1000%'` is looking good. But why so big value? Is it related to `matrix` calculations magic that GSAP has under the hood?

[Tweenmax set translateX not working as expected, why?]

Here's what I expect (set in DevTools)

 

 

[Tweenmax set translateX not working as expected, why?]

Here I need brackets transformed to the center of `#logo` but instead it transformed only a little bit. If I use absolute pixels then it's transformed, but I need relative! 

See the Pen jXWdaN by dubdub (@dubdub) on CodePen

 

What's strange is that anime.js transforms as expected...

And if you type this values in DevTools also works great. But GSAP works differently!

Not sure why this happens?

See the Pen jXWdaN by dubdub (@dubdub) on CodePen

[Better Adobe Illustrator SVG exports make GSAP animating easier]

Thanks for this tips. But what about Artboards when export? Are you choosing Fit to Artboard? Because if doesn't then Illustrator will add transforms. 

[Access stagger element/index possible?]

Is this possible to access animated element node or at least some index of stagger in onComplete? I see no data in fucntion

 

this.tl.staggerFromTo('#hello > path', 2, {
  drawSVG: '50% 50%'
}, {
  drawSVG: '100%',
  onComplete: (i) => {
    console.log('DONE', i) // undefined
  }
}, 1)

 

For example, I want to add fill when stagger of particular element is complete. Or other stuff...

[How to make SVG draw from one side?]

Thank you guys for valuables insights. Very helping!

 

I also find this article, I think it's very useful too - https://valhead.com/2017/03/03/three-illustrator-tricks-for-better-svg-stroke-animations/

[How to make SVG draw from one side?]

So, instead of normal graphics I need to export such stuff from Illustrator everytime I need to draw?

 

What if I have complex graphics, I need to change fill/stroke in every layer to draw animate it???

[How to make SVG draw from one side?]

Well no. This doesn;t work. 

 

Wow! This Illustrator/SVG/GSAP workflow if awfully ridiculously unusable.  What a shame.

[How to make SVG draw from one side?]

First of, I beg your pardon for creating this topic since it's unrelated to GSAP directly, more like SVG esoteric stuff. But I am complete Illustrator beginner, started using it only a week ago. And this animations things a tight together so much!

 

So, after diggin around this is what I found. 

 

1. First option is to fill original shape! But it looks like it is inconvenient way to work with illustrations, or am I wrong here (don't have real-world practice yet)

 

2. So I found second option:

  - Outline stroke on path

  - Remove Fill and add Stroke

  - Release Compound Path!

Now you have 2 shapes: inner and outter. Wew, that was wierd!

 

What do you think? What workflow pro's have? Can't find any tips on this topic.

[How to make SVG draw from one side?]

It looks like it's creating stroke 2 times, so how I can animate line to be drawn from one side to another?

 

I made simple path in Illustrator but I can't make it animate right way. No examples help my issue 

See the Pen NeKoGp by dubdub (@dubdub) on CodePen

 

See the Pen NeKoGp by dubdub (@dubdub) on CodePen

[How to fix this bug? What cause it?]

@OSUblake that's perfect! Thank you very much!

 

After Anime.js, where I needed to clean up manually situations like this, this feels like a breath of fresh air ?

 

I guess I need to rephrase title? I meant a bug in my application code, not really GSAP 

[How to fix this bug? What cause it?]

I updated the link, for some reason it was broken by forum formatting.

[How to fix this bug? What cause it?]

Hello, guys! 

 

Recently started to use GSAP in my apps, and I can't stop enjoying it. Still exploring it, so time to time have some issues. Like this.

 

If you click logo FAST multiple times then it's broken! 

 

See the Pen bQPXRB by dubdub (@dubdub) on CodePen

 

Looks like GSAP doesn't clean up transitions, if new animation happens before previous completed? How do I handle situations like this? 

See the Pen bQPXRB by dubdub (@dubdub) on CodePen