Share Posted December 23, 2021 Hello there, You awesome people on the Internet. I am back again with yet another query. What are we doing: - We are using a page builder on a CMS which allows us to add the class to the container and not the h2, p, span etc. elements. (I know that sucks but let's just say we don't have control over it). - We are giving the container a class and then using the same to find p, headings etc tags which we want to split and animate. - We are also wrapping the splitted lines in a div container using jQuery (it will help us with animation) The problem: - Since we are using forEach, is there any way to reverse the splitlines after every line animation? If not, maybe we can count all the lines somhow and have an onComplete function which will check the same and if all lines are animated, will simply reverse the splitlines? - Upon Resize of Window: On Big paragraphs, the window resize tries to adjust the splitted lines but fails. (Since they are wrapped inside the DIV now). Any way using which we could reverse the splitlines, execute it again and then run the animation again? What I've tried: I came across this amazing post here in which @GreenSock shared a codepen demo, I tried to use the same but found: - The lines count does not work since the split-me is now on multiple divs which might have multiple ps, h1s inside of it. So the splittext never reverses even after all lines are animated. - With resize, not sure why, but the Reverse was never actually executing, maybe because we wrapped a DIV around each line? Please check the Codepen attached to view what I mean. I would love to use some help ) Thank You See the Pen poreWeg by alexjain (@alexjain) on CodePen Link to comment Share on other sites More sharing options...
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!Register a new account
Already have an account? Sign in here.Sign In Now