Share Posted December 21, 2018 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 Link to post Share on other sites
Author Share Posted December 21, 2018 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! Link to post Share on other sites
Share Posted December 21, 2018 Hi @therddlr, Here is a pen showing how to both the line `y translate` and a reveal (using a parent with overflow hidden). I piggy-backed on jQuery (wrap , unwrap) to make it simple ... but you can find a native way to handle it if you are not using GSAP. Hope this helps! See the Pen maWmxJ by sgorneau (@sgorneau) on CodePen 4 1 Link to post Share on other sites
Share Posted December 23, 2018 You can split twice like this: See the Pen pxBMvy by PointC (@PointC) on CodePen Happy tweening. 2 Link to post Share on other sites
Share Posted December 15, 2020 On 12/23/2018 at 5:44 PM, PointC said: You can split twice like this: Happy tweening. Hi I'm trying your method to split text twice in gsap 3 let split_1 = new SplitText(".js-text", { type: "lines", linesClass: "lineChild" }); let split_2 = new SplitText(".js-text", { type: "lines", linesClass: "lineParent" }); but I get error Uncaught TypeError: Cannot read property 'nodeType' of null Error is caused by the second split, because removing that I get no error. Any idea? Link to post Share on other sites
Share Posted December 15, 2020 @Black Ducas Please make a minimal demo of the issue. Link to post Share on other sites
Share Posted December 15, 2020 A demo would be great @Black Ducas. Here's my demo from above updated to GSAP 3. Seems okay to me. See the Pen 89f25b8790979573846704db96ebed43 by PointC (@PointC) on CodePen 4 Link to post Share on other sites