Jump to content
Search Community

How to create seamless loop of svg rect

tun712 test
Moderator Tag

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

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...