Jump to content
Search Community

Set timeline for each stagger item

Nickicool test
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

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

  • Solution

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 :) 

  • Thanks 1
Link to comment
Share on other sites

@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

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

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...