Jump to content


How to animate the elements one by one?

Recommended Posts



I have logo and content on my website. I am able to animate the logo and content on page load.

I am using the scroll magic plug-in because when the user scrolls the mouse wheel than animate the elements.

Now the issue is, My animation is working together, I mean I have to animate first content then I have to animate the logo. After complete, the animation logo than again I have to animate the content. I tried some code but not working.


This is my task

I have to animate the header content from bottom to top 70% linearly. then I have to animate logo 50% from top to bottom, and then cross. then again I have to animate the content bottom to top which is the last content.


Please help me out with this issue.




See the Pen EbMoqB by Narendra_verma (@Narendra_verma) on CodePen

Link to comment
Share on other sites

Sorry, but I'm quite confused and don't really understand what you are asking. This seems to be almost the same question you've asked in multiple threads.

You seem to understand tweens and timelines just fine, and again, this looks like more of an issue with how you are building your ScrollMagic scenes and triggers.



Link to comment
Share on other sites

I just need to scroll the elements. I mean first, scroll the content with animation once complete it then scroll the logo animation. Now content and logo both are animated at the same time.


When I am scrolling the mouse wheel then my all the TimelineLite script is working. I have to do this one by one

Link to comment
Share on other sites

Can anyone help me out in this issue? Please

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.