Nickicool Posted November 6, 2020 Share Posted November 6, 2020 I need to controll the animation with only one scroll trigger (in the example Codepen below): Headers with "stagger" animation (this is easy to do, in the example it works) Paragraphs ("<p>") with staggers effect in each of the ". item" (and how to do this I do not know - in the example, non-working, incorrect code, just to understand which way I'm thinking). Please help me!) See the Pen rNLZemG by nickicool (@nickicool) on CodePen Link to comment Share on other sites More sharing options...
Solution ZachSaucier Posted November 6, 2020 Solution Share Posted November 6, 2020 Hey Nickicool. It's not fully clear if you want all of the paragraphs to animate in using a single stagger (i.e. paragraphs from all three items) or on a per-item basis. I assume the latter. See the Pen yLJxJZZ?editors=0010 by GreenSock (@GreenSock) on CodePen Perhaps my article about animating efficiently would be helpful to you, though you're already using some of the tips 1 Link to comment Share on other sites More sharing options...
Nickicool Posted November 6, 2020 Author Share Posted November 6, 2020 @ZachSaucier Thank you for the answer - you helped me a lot, directed me in the right direction! I made a one change in your example solutions: - content in ".item" can be more complex than a few paragraphs (this was just an example). That's why I wanted to use timeline instead of tweens to animate content. See the Pen gOMdgqx?editors=1010 by nickicool (@nickicool) on CodePen Now everything works the way I want it to! I also want to thank you for the link to your article-a great guide! 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