Jump to content
Search Community

Scrolltrigger & DrawSVG - only allow one animation to happen after another is complete?

growmybusiness test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi there!

 

So I'm fairly certain I'm attacking this from the wrong angle already. But I'm trying to get multiple SVGs to animate as one with ScrollTrigger.

 

As you can see in the CodePen, they're all triggered fairly within the same space on the viewport. I'd like to make it so that essentially they all work as one.

 

Any suggestions on how I can achieve this? Hope this makes sense!

 

Thanks,

Ben Elwood

See the Pen abYPeON by benjaminelwoods (@benjaminelwoods) on CodePen

Link to comment
Share on other sites

  • Solution

Why not just combine your artwork into one <path>? That'd be a lot easier/cleaner. 

 

You can loop through the elements in order and build out a sequenced timeline, but your last path has the line starting at the bottom and going up, so you'd have to invert that in your editor -OR- customize that tween to reverse direction:

See the Pen JjLxjBd?editors=1010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

On 8/19/2022 at 5:22 PM, GreenSock said:

Why not just combine your artwork into one <path>? That'd be a lot easier/cleaner. 

 

You can loop through the elements in order and build out a sequenced timeline, but your last path has the line starting at the bottom and going up, so you'd have to invert that in your editor -OR- customize that tween to reverse direction:

 

 

 

 

Thank you so much! Works a charm :)

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