Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Everything posted by therddlr

  1. 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. 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?
  3. @GreenSock thank you, now it's perfectly clear! SVG nuances are so confusing, really appreciate your support!
  4. @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. @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. 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. @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. @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. 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. 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?
  12. 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.
  13. 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...
  14. 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/
  15. 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???
  16. Well no. This doesn;t work. Wow! This Illustrator/SVG/GSAP workflow if awfully ridiculously unusable. What a shame.
  17. 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.
  18. 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
  19. @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
  20. I updated the link, for some reason it was broken by forum formatting.
  21. 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! Looks like GSAP doesn't clean up transitions, if new animation happens before previous completed? How do I handle situations like this?