Toso

hi @FilipTheGod happy to see you around, unfortunately, it's hard to debug your code if you didn't add/create a minimal demo, also it can be done in different ways with but idk whats your layout looks like

I think the problem happens because you are not listening for the scrolling event I created a quick demo where you listen to leave and enter events on the section and also the scrolling https://codepen.io/ahmed-attia/pen/KKEYodo?editors=0010 https://codepen.io/ahmed-attia/pen/wvOZmLx another one with border-radius and mix-blend-mode instead of svg and clipping to edit the border-radius https://9elements.github.io/fancy-border-radius/ https://codepen.io/ahmed-attia/pen/BabEPbx?editors=0110 I hope this helps a little, PS: this code was created by (gsap helper 🫡 or Rodrigo 🫡 I can't remember ) he added it as a solution in a different scenario i just added the scale to get closer to your idea

hi @Sulochan

btw the line has a style 1px height and don't forget to add font-kerning in CSS

if you can create a codepen demo it would be easier to debug the code

hi @jo85 it would be great if you could share your demo in Codepen or something, also, you are using SplitType and that's not related to gsap, gsap plugin called SplitText https://gsap.com/docs/v3/Plugins/SplitText/ and in the code you are providing you can try to remove the extra space in the 'lines,words,chars' and try to make it work like that also no need to split it to chars if you won't animate the chars and make sure if there is any other css doing any conflicts let typeSplit = new SplitType('p.text-medium', { types:'lines,words,chars', }) gsap.from('p.text-medium .line'{ yPercent: 100, opacity: 0, stagger: 0.1, }) i would recommend switching to SplitText It is more flexible, stable, and up to date, I am not against Split-type I worked with it many times but it creates some issues in SSR and also you can notice they don't update or fix old bugs It is great and I appreciate everyone's effort and the contributors but in my opinion, it's not a great option in the long run

hi @Supachai is it possible to share your demo ? in case you need to create a new quick demo https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters

after spending some time trying to make it work I found that you forgot to add the gsap and ScrollTrigger 😂and found some issues in your demo so I created a small demo with the animation you need 🫡 https://codepen.io/ahmed-attia/pen/OJqBKRX

I would recommend taking a good looook at this demo to create dynamic loops with staggers https://codepen.io/snorkltv/pen/ExVEOPa and what's better than a good demo? A good demo with a great lesson that walks you step by step

I'm a little confused about your code, you are using 2 navs you can use only 1 nav since both of them are the same thing nothing different, or if you planning to use another nav for example with a different layout or something inside the mobile you can use matchMedia to add different animations for it

something like https://codepen.io/GreenSock/pen/xxjErmp

hi @johndoe000 to be honest I didn't read anything I was just curious and wanted to play with the shape but I found that you are creating it inside a loop and 2 timelines, you can do it with one timeline or 1 tween as I did here you just need to check how staggers work https://gsap.com/resources/getting-started/Staggers also overflow:visible for the svg will prevent this cut on that yellow circle https://codepen.io/ahmed-attia/pen/LYaWGJd?editors=1010

GSAP inside any framework is the same once you have a good understanding of GSAP, It is like driving a car on different terrains ofc you need to know how React works also after, you will just need to look at the examples here in the docs to use GSAP in React and you ready to go https://gsap.com/resources/React so I would recommend the creative coding club course to learn how to drive this car first then you are ready to hit any terrain you want

try to import from the dist like import gsap from "gsap/dist/gsap"; import ScrollTrigger from "gsap/dist/ScrollTrigger"; or import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/dist/ScrollTrigger.js'; and don't forget to register the plugin after that gsap.registerPlugin(ScrollTrigger);

hi @Grene usually it happens cuz of the browser, I get the same issue with Safari every time but usually, I use anticipatePin: 1 along with ScrollTrigger.normalizeScroll(true) and it fixes it so try to add both of them and create a demo if this didn't work for you so we can test it and find a way around it

Hi @Yagnik Patel while working with frameworks you can use Stackblitz starter templates to create your demos it will be easier, also here is a working demo for snapping vertically and horizontally https://codepen.io/GreenSock/pen/eYrOObw?editors=0010 because in your demo a lot of things were going on and this handleScroll function you created and playing on window scroll event looks sus to me 🫡 and since you are working with react you can use the useGSAP hook https://github.com/greensock/react

i tested it locally then copied the code and added it to the stackblitz but still can't find these errors everything is working fine I think 🤔 https://stackblitz.com/edit/gsap-react-basic-f48716-dbfagy?file=src%2FApp.js

I'm not sure what you are trying to do here but you can use the seamlessLoop https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop#demo and for the space between them you will remove this column-gap: 2rem; and may use paddingRight in the loop config

can you add a minimal demo to see the full code , but in case you cant create a demo you can try these steps it might work for you 1- add your code inside gsap.context() 2- add this context inside an onMounted() something like onMounted(()=>{ let ctx = gsap.context(()=>{ // your code also in your code dont use duration while you are using scrubbed animation }) }) also add the clean up function >> ctx.revert() inside onUnMounted() here is a better thing you can check the starters collection here with nuxt to know where to add what https://stackblitz.com/@GreenSockLearning/collections/gsap-nuxtjs-starters

happy to hear that, but there is no mm.revert() in the code 🤔

hi , it would be awesome if you could add a minimal demo since it is easier to debug but I can see a few things like you are using context.conditions but can't see where you declared/destructured like let { isDesktop, isMobile, reduceMotion } = context.conditions; here https://gsap.com/docs/v3/GSAP/gsap.matchMedia()#conditions-syntax----powerful- also, you are using scrub and toggleActions together

Don't worry everyone here has more experience and could have explained it better, it's your bad luck you got me 😂 🤣 have a good day

🤔🤔 1 question per day that is the limit, I'm kidding, and here is your demo 🙏 you need to use the https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop its works on x and y axes, in the demo i only added it to one line of boxes so you can play around it and test the other config https://codepen.io/ahmed-attia/pen/MWxYbVr?editors=1010 also, it can be useful to check this topic on how to create a demo since you were adding the CDN inside your code