Kenken94 Posted February 8, 2023 Share Posted February 8, 2023 Hi ! Pretty new to GSAP so I'm sorry if the thing that I'm asking is pretty basic thing. Currently experimenting on making a infinite sliding background, and the current problem that I encounter is : 1. each sliding background kinda starts sliding from the middle of the background. Is there anyway to make it starts from the left then sliding to the right. 2. I tried to loop the animation so it starts from the beginning again but, when the animation starts over the background became white then the animation cycle starts again. Is there anyway to make it loop naturally so each background will start animating on top of each other. Those are my current issues that I encounter on my experiment. The experiment idea came from this website that I saw a few weeks ago : https://soto.shinfuji.co.jp/ So, my current goal is not to recreate 100% the exact thing, but just the essential animation which is sliding from left to right then looping the animation. And I tried by copy pasting the whole site and try deleting some elements that I don't need but it ended up breaking the whole thing. Thanks in advance for any help you might provide. See the Pen dyjEMvJ by Kenken94 (@Kenken94) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted February 8, 2023 Share Posted February 8, 2023 Hi @Kenken94 welcome to the forum! Don't worry about asking 'basic things' here. Looping animation can be really tricky, but luckily our @Carl dit an in depth tutorial about it which is a great watch and easy to follow. I do have to saw that this is a bit advanced topic if it is your first animation, but I think if you pay close attention and watch the demo he provided. For the rest of your setup I would work with opacity: 0; instead of display: none; I'm not completely sure, but something tells me that images do not load if they are display: none; so when you set them to display: block; with GSAP the images first need to load which could result in weird effects. Also just something to keep in mind .fromTo() tweens are great, but personally I rarely use them, if your element is al ready at it end state (or begin state) a simple .from() or .to() is all you need. You could also look into clipPath, it's a different effect, but it is more performant then animating the width of something (I've used the following tool to create the clip-path's https://bennettfeely.com/clippy/. Sorry, maybe a bit of information overload, but I would suggest trying your hand at a new demo with this information and post back here if you have a new demo with a question. Hope it helps and happy tweening! See the Pen eYjagaL?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 4 Link to comment Share on other sites More sharing options...
Kenken94 Posted February 24, 2023 Author Share Posted February 24, 2023 Hi @mvaneijgen Sorry for the very late reply. I've been busy finishing up another project. Thank you for the advice ! , I'll look up the tutorial and try experimenting with the source that you've provided. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now