Jump to content
GreenSock

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

How to create seamless loop of svg rect

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

 

I'm trying to create seamless loop of animated border.  svg rect is moving in rectangular path but it stops for a while before repeating

 

The example can be seen here:

 

It should work like this,

See the Pen VGEYEa by anon (@anon) on CodePen


 

 Here’s an example for

See the Pen qXMeeg by PointC (@PointC) on CodePen

See the Pen qMJENG by anon (@anon) on CodePen

Link to comment
Share on other sites

Thanks

 

Gone through your post but, as I'm very new to GSAP  I've difficulties in creating animation. I want to create very simple animation. I've created

See the Pen qMJENG by anon (@anon) on CodePen

, would you please edit it?

Would you like to help me to create animation?

 

Also I found another example here :

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

Link to comment
Share on other sites

I'm assuming you just want a seamless rectangle? 

See the Pen PdLyZo by PointC (@PointC) on CodePen

 

That should get you started. Happy tweening.

:)

 

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

Thanks for reply.

 

I've done

See the Pen gdEdRQ by anon (@anon) on CodePen

using your code,  but I was trying to do something like in image

 

Three elements moving in  rectangular path one after each other.

 

In image there is black border, which is path and three red lines are elements - suppose snakes -  chasing each other ,  moving around path

Link to comment
Share on other sites

It looks like PointC provided an excellent solution. To take it further I would suggest you create a timeline for each “snake”. You can then give each timeline it’s own delay OR  startTime in a parent timeline. 

  • Like 1
Link to comment
Share on other sites

Yep, all you'd really have to do is move that timeline into a function and create a timeline for each group of lines. This should get you started.

 

See the Pen vzPjrV by PointC (@PointC) on CodePen

 

  • Like 3
  • Thanks 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.
×