• Content Count

  • Joined

  • Last visited

Community Reputation

6 Newbie

About therddlr

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. therddlr

    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!
  2. therddlr

    Splittext wrap lines in lines?

    Hello! I am trying to achieve similar text up/down transformY reveal effect as this examples 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?
  3. therddlr

    Set transformOrigin not working as expected

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

    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 😀
  5. therddlr

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

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

    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.
  8. 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?
  9. therddlr

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

    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?
  11. therddlr

    Tweenmax set translateX not working as expected, why?

    Here's what I expect (set in DevTools)
  12. 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?
  13. 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.
  14. therddlr

    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'#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...
  15. therddlr

    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 -