Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Animate type with stagger – Mask type and control group

Recommended Posts

Hi everyone (Newbie here). I'm playing around with a small animation which staggers some type. I was trying to find a way of animating into a window, as if it was masked, so I tried to use overflow hidden, but Im animating the mask itself.... My brain is slightly fazed..., so was wondering how I can animate some elements in a div and use the stagger there? so the Mask stays in place.. if it that works??


also, is there a way to control the second part of the animation (.to) and almost group the stagger perhaps, rather than one after the other. 


thanks in advance (sorry if my code is a little iffy ;-))



See the Pen GRvWELW by velvetsoup (@velvetsoup) on CodePen

Link to comment
Share on other sites

Hey there @lister110


Did you mean to target the inner div like so?

See the Pen rNzyGLW by GreenSock (@GreenSock) on CodePen

Could you possibly explain what you mean by 'group the stagger' What are you trying to achieve visually?

  • Like 1
Link to comment
Share on other sites

Ahh, thats it.. sorry I missed that..


Yep, although I have the animation (sequenced animating out(.to)), I was wondering if I can almost control all the three lines as a group and move them together? almost overriding the sequence of the second part of the animation?

Link to comment
Share on other sites

No worries!

Are you asking how to animate all the lines 'out' at the same time?

If so you can do that by removing the 'stagger' on the second tween.

See the Pen rNzyGLW?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 2
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.