TrulyNewbie Posted September 13, 2020 Share Posted September 13, 2020 Hi, I haven't made a code pen. Because I didnt think I need one. But I wanted to created an overflow hidden split text. But, I wanted to do it utils.Array with a scroll trigger, so each div with the same name reacts at the same time.. Thank you for your continued help Link to comment Share on other sites More sharing options...
Visual-Q Posted September 13, 2020 Share Posted September 13, 2020 Not sure exactly what you're asking if you mean to control by class name though as opposed to just accessing .line or .chars arrays directly (first example) the second example in this pen adds class name to divs and creates an array from them. See the Pen dyMKYro by Visual-Q (@Visual-Q) on CodePen 1 Link to comment Share on other sites More sharing options...
TrulyNewbie Posted September 29, 2020 Author Share Posted September 29, 2020 Hey, I've made a codepen (which I should have done in the beginning) See the Pen RwamprK by NewbieRuby (@NewbieRuby) on CodePen How do I merge my code? I've posted both of my snippets, but I'm having trouble. So what I have is an overflow parent and the text is the child. But I only want it be triggered when scrolled into view. Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 29, 2020 Share Posted September 29, 2020 13 minutes ago, TrulyNewbie said: I only want it be triggered when scrolled into view. It does happen when it's scrolled into view. But when the page is loaded it's already in view. The markers show that. Does that make sense? Link to comment Share on other sites More sharing options...
TrulyNewbie Posted September 29, 2020 Author Share Posted September 29, 2020 Hey, But by the time I get to the second text it’s already loaded. The code doesn’t work together, they’re just beside one another Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 29, 2020 Share Posted September 29, 2020 That's because you're targeting all of your h1s in a single tween. You should instead just target the one h1 that is coming into view: See the Pen MWydomr?editors=0010 by GreenSock (@GreenSock) on CodePen More about this in my article about animating efficiently and the most common GSAP mistakes I highly recommend both. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now