GSAP marquee animation

[Bogdan92]

 

 

Can someone tell me why my animation works differently when I put it inside <section>?

See the Pen QWqoKBv by GreenSock (@GreenSock) on CodePen.

[GSAP Helper]

Hi @Bogdan92 and welcome to the GSAP Forums!

 

That demo is from the GSAP Collection and is working as it should.

 

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Bogdan92]

Thank you for your answer, and sorry for my mistake, first time posting something with Codepen.

Here is the link to my issue, hope it will help.

 

So to make things clear, when I put my h1 tag outside of my section, the code works perfectly, but when i put it inside the section you can see what is happening. 

See the Pen GRLdoVN by bogdan-stojanovic (@bogdan-stojanovic) on CodePen.

 

 

[Rodrigo]

Hi,

 

That's because of the way the Horizontal Loop helper function works, nothing more. The helper function moves a group of items in the direction you tell it to (reversed config option) and when that element reaches the edge of it's parent is move to the opposite side nothing more. Sure enough sounds simple but the logic behind it in order to make it fully responsive and performant is not ?.

 

https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop

 

With that being said, why are you trying to animate elements in different parents or outside the parent? I fail to see the logic behind it. We have these demos that use the Observer Plugin and ScrollTrigger to change the direction and speed of the loop instance:

See the Pen zYaxEKV by GreenSock (@GreenSock) on CodePen.

 

See the Pen GRwePYw by GreenSock (@GreenSock) on CodePen.

 

Finally is worth noticing that you have only two elements in your loop, so for obvious reasons there is going to be a jump and empty space when the elements have to be placed at the start again. Is a good idea to have enough elements to use the entire width of the screen ( in large screens of course).

 

Hopefully this clear things up

Happy Tweening!

[Bogdan92]

Thank you. 

This was a lot of help!

[CaseyFoster]

On 4/9/2024 at 9:49 PM, Rodrigo said:

Hi,

 

That's because of the way the Horizontal Loop helper function works, nothing more. The helper function moves a group of items in the direction you tell it to (reversed config option) and when that element reaches the edge of it's parent is move to the opposite side nothing more. Sure enough sounds simple but the logic behind it in order to make it fully responsive and performant is not ?.

 

https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop

 

With that being said, why are you trying to animate elements in different parents or outside the parent? I fail to see the logic behind it. We have these demos that use the Observer Plugin and ScrollTrigger to change the direction and speed of the loop instance:

 

 

 

 

 

 

Finally is worth noticing that you have only two elements in your loop, so for obvious reasons there is going to be a jump and empty space when the elements have to be placed at the start again. Is a good idea to have enough elements to use the entire width of the screen ( in large screens of course).

 

Hopefully this clear things up

Happy Tweening!

Thank you Rodrigo sir for helping me out as well, you made my day  Do you also need help with your assignment because deadlines are close? Then you can visit my favourite website, which is used to get me out when I get stuck in my writing work. You can visit https://stateofwriting.com/ them and hire a professional to do your work. They are professionals in their work, and the best part is that they are so affordable that any student can hire them. 

Thank you Rodrigo sir for helping me out as well, you made my day ❤️
Edit: If I want to know more, I will ask by starting my own thread.