Jump to content


Seamless infinite loop of SVG elements vertically

Recommended Posts

I'm working on a project to infinite scroll a set of diagonal lines in an SVG. I had some massive help from @Sahil  (thank you :)) who added easing effect on mouse scroll. He also suggested that I incorporate an infinite seamless loop of these shapes using the `modifers` plugin. So i pulled what I could from  https://cdpn.io/QEdpLe


I'm basically have 2 issues:

  • There's a noticeable jump between the end of one loop and the beginning of the next (See attached video: https://drive.google.com/uc?id=1GfIHd98vs85SOCRdOa45OmzsvjCFanJG). It's not quite right
  • `repeat : -1` doesn't work. I think it has to do with the proxyTimeline. When i try infinite repeat, the diagonals fly through the viewBox and it does not look good.


Here's what I've figured out:

  • Based on the "ModifiersPlugin:Seamless Loop" demo, We need to force each child item to advance simultaneously toward the distance of it's parent container, in this case it would be the `viewBox`
  • To position the next item back at the beginning, we use the `modifiers` callback and modulus to fix the next diagonal to the bottom of the viewport, using the height value of the `viewBox`.
  • The "ModifiersPlugin:Seamless Loop" demo also using an overflow to hide each element moving the left position. Somehow I might need to move the transition diagonal to happen outside of the `viewBox` but i'm not sure how to do that


Does anyone have suggestions on how I can make the loop more seamless?

See the Pen PowKLVQ by gortiz022 (@gortiz022) on CodePen

Link to comment
Share on other sites

Hey Gabriel and welcome.

The biggest cause of the jump is because you're not really wanting the animation to go all the way to 100%. What I mean by that is your SVG isn't setup to loop perfectly - it's "too tall" due to how rectangles work. As such simply changing the svgHeight to accommodate that fixes most all of the jump:

// Not perfect, I used trial and error to get a value
var svgHeight = svgGroup.viewBox.baseVal.height * 0.9369;

However, you could probably simplify your setup a good bit, like this:

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


Let me know if you have any questions. Happy tweening!

  • Like 1
Link to comment
Share on other sites

@ZachSaucier Thank you so much for your help! You are 100% correct, the issue is that the beginning of the SVG needs to overlap with the end in such a way that makes it seem seamless. It's really difficult to do, and what i found from the modifiers demo was that the re-positioning of the box happened outside the overflow of the parent container --- so that's why it has a seamless effect.


Can you suggest any way to achieve an infinite seamless effect? Thank you again for your help!


Link to comment
Share on other sites

I think the approach I have above is good. You can spend more time playing with the value or try to figure out a way to get the exact number using dimensions to further reduce the chance of a jump. 

  • Haha 1
Link to comment
Share on other sites

@ZachSaucier yea i see what you mean. I'll continue to mess around with it. Thank you for your help and the inspiration. They key as you suggested is adjusting the viewBox. Thanks!

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.