therddlr

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!

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?

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

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

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

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

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

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?

@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

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?

Here's what I expect (set in DevTools)

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! 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?

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.

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

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/