Leaderboard

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: https://codepen.io/GreenSock/pen/zYaxEKV https://codepen.io/GreenSock/pen/GRwePYw 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!

Exactly how you've build it. You just have to create an .arrow element in your code Nope. You can, but you'll then have to manually fix all the browser inconstancies that the DrawSVGPlugin already solves for you. https://codepen.io/mvaneijgen/pen/rNbvLmM?editors=0010

I think this is what you are trying to achieve, check comments for explanation. https://codepen.io/SahilAFX/pen/xxejZqy

@GreenSock that is slick! You're right, thanks so much for coming up with that!

Hi @Jean-francois and welcome to the GSAP Forums! Creating something like that is not really simple but I think the best option here could be to use the Observer Plugin and the callbacks it offers such as onChangeX, onChangeY, onUp, onDown, onLeft and onRight: https://gsap.com/docs/v3/Plugins/Observer/ You beat me and found a solution, but still Observer could be helpful and you could take a look at it. Anyways, is great to hear that you were able to solve it 🥳 Happy Tweening!

wow that was too easy. been stuck on this for a while. thank you sir.

Hi, Just move the configs for duration, ease, scrolltrigger and stagger to the to config section: gsap.fromTo( titleSplit.chars, { y: -100, }, { y: 0, stagger: 0.1, duration: 1, scrollTrigger: { trigger: titleSplit.chars, start: isDesktop ? 'left 80%' : 'top 80%', end: isDesktop ? 'right 20%' : 'bottom 20%', toggleActions: 'play reverse play reverse', containerAnimation: isDesktop ? containerAnimation : '', markers: true, }, } ); Here is a fork of your demo with those changes: https://stackblitz.com/edit/stackblitz-starters-rdigb3?file=app%2Fpage.js Hopefully this helps. Happy Tweening!

Thank you @Sahil! This was exactly what i was going for.

Hard to say without a minimal demo (in which we can inspect/edit the code), sounds like you might want to use refreshPriority if you're creating multiple scroll triggers that you do not create in order in which they appear on the page https://gsap.com/docs/v3/Plugins/ScrollTrigger/ But again hard to say, if t does not solve your issue please provide a minimal demo so that we can help you debug. Hoop dat het helpt en veel geluk me je project!

@Rodrigo thanks for your reply. In no way I'm posting so you can fiddle with my css, I'm only hoping that something might be extremely more obvious to others than me. You' re right about the css, It looks like the height 100% that I used in the absolute positioned pin element caused the extra height. I changed that to bottom: 0 and it worked as expected. https://codepen.io/44db/pen/QWPmLwV Thanks for all your help.

Looks like they just use a curved path in the SVG and scale the y from 0 → 1 on scroll. This should get you started. https://codepen.io/PointC/pen/abxYroe Happy tweening.

Hi @Obaida Zeino and welcome to the GSAP Forums! Unfortunately your demo is not working because these seem to be undefined: gsap.to(`.${styles.container}`, {}); gsap.fromTo(`.${styles.second}`, {}); scrollTrigger: { trigger: `.${styles.black}`, } I understand the benefits of scoping your CSS, but unfortunately the weird way of doing this that React enforces doesn't seem to help. Other frameworks like Vue, Svelte and Angular (to name just 3) allow you to scope your styles without this CSS modules stuff, which could be the problem here. You could add just regular classes after the scoped ones by the module using plain text, with the sole purpose of using those classes for selecting the elements. Also keep in mind that with useGSAP you can scope your selectors: https://gsap.com/resources/React Once we see a working demo, we'll be able to further help you. Finally thatnks for being a GSAP Club member and supporting GSAP! 💚 Happy Tweening!

We're back up again everyone! Thanks for bearing with us through this outage. 💚 We appreciate you all!

OMG!!! I just found the problem and solved it. In my landing page, there were some pictures that didn't have FIXED HEIGHT and ScrollSmoother seemed to forget that the page had those images. I fixed the height of images and now it's working perfectly fine. ?

You can calculate the difference in the heights using functional values so that you don't get any red space, and you can use object position to adjust the position of the image ☺️ https://codepen.io/GreenSock/pen/QWaKmEz?editors=0110

Hey @Yunus Emre I saw your demo and the problem is not from Gsap or Next, the issue is related with loading times. If you set the network as "slow 3g" and you are on the home page, the images are loaded before your Javascript, so when your script runs the images have width and height. On the other hand if you are on about page and reload the site, your script is loaded without images, and then if you go to the home page the images aren't loaded because as they only exist on the home the browser needs to download them, that's the reason you have those random numbers. I created a demo with the images on the about page, and if you go to the home the parallax is working fine. https://codesandbox.io/s/jovial-paper-y21b7 As @OSUblake said, you need an onload function and run ScrollTrigger when the images are loaded. Hope this helps! ?