All Activity

Perfect - thanks, Jack! Just what I needed. I'll keep that in mind for the future. Love your GSAP tools

Yes, thank you. A realistic ease behavior would require access to properties level to show a realistic affect, but that would not be possible here as I understand now it is internally just like a master-timeline for those keyframes. I hope to see such behavior in future update; and thanks again.

Hi! I'm using GSAP and the ScrollTrigger for the second time while working on a project. I've uploaded all the source code to the codesandbox linked here: https://codesandbox.io/p/github/mjyao/gsap-help/main?workspaceId=277cb985-f24f-46c3-8af6-3303ee846483&import=true. For some reason, the 2 useEffect statements in src/Scene.js cause the following errors (more unshown). I've uninstalled/reinstalled all packages, etc., but nothing seems to work. I am following this repository, which does seem to work, so I'm not sure what could be the issue: https://github.com/oss2019/parsec2024 Thank you so much for the help!

@hariwebs Hello how are you doing sir i have seen your design and the sample that has been created its a beautiful website lets connect and discuss details about this project i have sent you an email from : sharmasarthak05@gmail.com Thanks. ॐ

@mvaneijgen is correct - that's exactly the tool you'd need. https://codepen.io/GreenSock/pen/abrJKVw?editors=0010 It doesn't matter if it's a parent/child relationship - that method can convert coordinates from anywhere to anywhere.

Yeah, that's because you're animating the very same element that you're pinning and also using as the trigger. I'd recommend just wrapping it in another element so you can pin the outer element and animate the inner one: https://codepen.io/GreenSock/pen/YzbZvQL?editors=0010

Yes, that's expected behavior, but I can understand why you'd think there's something wrong. Keyframes basically create a timeline internally that gets scrubbed with that ease. Think of it like animating the progress from 0 to 1. When you use an ease like back or elastic, those go BEYOND 1 or 0, but you can't make the playhead of a timeline go PAST the end or beginning. Think of it like playing a 1-minute YouTube video to a time of 1.3 minutes. There is nothing after the end (1). Does that clear things up?

Hello! I'm new to pinning elements in ScrollTrigger and I think I'm missing something basic here. Why is it that when I have scrub set to true, this works just fine, but when I set it to something like scrub: 3 so it has a bit of delay, it breaks when I hit the end of the pin? The pinned element jumps back up to the top.

Hi, That goes in a defaults config object: https://gsap.com/resources/getting-started/timelines/#timeline-defaults const tl = gsap.timeline({ paused: true, defaults: { ease: "power2.inOut", }, }); That gives every child tween in the timeline the same easing function, but that would have no effect if the individual tween has a specific easing function in it: const tl = gsap.timeline({ defaults: { ease: "power2.inOut", // default ease for all child instances }, }); tl.to(elementOne, { x: 200, // default easing here power2.inOut }) .to(elementOne, { y: 200, ease: "none", // specific easing function overrides the default one }); Finally this look odd to me: tl.add( tl.to(".logo", { x: "500px", duration: 1 }) ); A to() method returns the timeline itself, so basically you're adding the timeline to itself: https://gsap.com/docs/v3/GSAP/Timeline/to()#returns--self Just use a to(), from() and fromTo() method instead of add() it makes more sense. tl.to(".logo", { x: "500px", duration: 1 }); That in fact would use the default easing function set in the timeline's default config object. Hopefully this clear things up. Happy Tweening!

Yep, you can use ScrollTrigger's isTouch property in order to known the device being used: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.isTouch You can combine that with GSAP MatchMedia: https://gsap.com/docs/v3/GSAP/gsap.matchMedia() Maybe something like this: if (ScrollTrigger.isTouch === 1) { ScrollTrigger.normalizeScroll(true); } In combination with MatchMedia: const mm = gsap.matchMedia(); mm.add("(max-width: 1024)", () => { if (ScrollTrigger.isTouch === 1) { ScrollTrigger.normalizeScroll(true); } }); That would be for screens below most tablets in landscape. Hopefully this helps. Happy Tweening!

Hey, Sorry to wake this thread years later, but it's exactly what I was looking for. Unfortunately the answers are outdated and `TweenMax` no longer exists. I tried the following with the hook provided for React.js, but the easing doesn't seem to apply correctly. Also, I'm not sure the timelines are supposed to be added this way: useGSAP(() => { const tl = gsap.timeline({ paused: true, ease: "power2.inOut" }); tl.add( tl.fromTo( ".logo", { transformOrigin: "center", y: "-500px", ease: "none" }, { duration: 1, transformOrigin: "center", y: 0, ease: "none" } ) ); tl.add( tl.to(".logo", { x: "500px", duration: 1 }) ); tl.play(); }); Edit: I realised I might not need to do `tl.add` since I used `paused: true`, but I'm wondering what both approaches would be with and without pausing it. Any help would be greatly appreciated,

Hi, I was reading in the doc and trying to do some experiments. It seems there something wrong with "ease" using key-frames. You can see in provided codepen. Ease working as expected when assigning forEach to be "back.inOut(2)". But, when using "each" it does not play as expected. I am expecting a small back move at the start and at the end of the entire animation. I also included the expected animation (not perfect just an example). I am new to this, is this a bug or I am missing something? Note, some other ease-types will show the same issue like "elastic", but other eases will work fine (such as power4.inOut). Thanks for the great work anyways.

Hello! Glad to be back on this great forum with new questions. Recently, I stumbled upon a problem with my animation. I'm trying to combine a few sections with simple scrub animations, but one section in the middle uses an observer to stop scrolling and animate through a few slides. I was using some of the forum's insights from posts about combining ScrollTrigger and Observer. However, my issue is that I'm using the Lenis library for smooth scrolling. Instead of manually stopping scrolling and saving its position, I just call lenis.stop() and lenis.start(), which works like a charm. But I have a few anchor links on my site, and when I use the lenis.scrollTo() function to scroll to the needed section, I encounter a problem. When I try to scroll to the footer, which is below the section using the observer, my scroll just stops. I thought, "Okay, just disable Observer and ScrollTrigger, and after scrolling, enable them again." This leads to my final problem. It works, but when Lenis scrolls to the footer and onComplete enables ScrollTrigger, the scroll position resets to the top of the site, and when I scroll, it resets back to the section that uses the observer. I made a simple CodePen to try to fix that issue, but I'm stuck. Please help me! 😊

Dear, thanks for reply, i am not totaly aware of this plugin but based on what i read i don't think so this can help me as i don't have parent child situation and i am not talking about local coordinate i just want to find the top left corner of the rect even after make some tranformation like the rotation, i did this in gsap 2 but unable to do it in gsap3

Thank you! I will look into these links!

Are you looking for something like this https://gsap.com/docs/v3/Plugins/MotionPathPlugin/static.convertCoordinates()?

Thank you , I know because normalizescroll is not in that test site for now. I have problems on the phone ( when u check the screen video) u will see white spaces between each sections. (Without normalizescroll) I can only solve this problem for now by implementing normalizescroll( but looks not so nice on desktop then) is there an option for only implementing normalize scroll on mobile devices / or breakpoints? Or bring back smooth scroll on desktop ? tommorow i will make a test site on codepen then maybe we can find the problem.

Hi, I checked the link on an iPad running iOS 17 on chrome and safari and I can't see anything wrong with it. That demo is not using normalizeScroll() though, since the address bar hides/show when you swipe down/up. Be sure to check the docs on that regard: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll() Other option you could try is ignoreMobileResize in the ScrollTrigger global config: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.config() ScrollTrigger.config({ ignoreMobileResize: true, }); Once again, without a minimal demo that clearly illustrates the issue is really hard for us to see what could be the problem. Happy Tweening!

Hi, I don't have time to go through all your code and without a minimal demo is really hard for us to get an idea of what could be the problem. I made a simple port of the demo you linked to a Vue app and it seems to work as expected: https://stackblitz.com/edit/vitejs-vite-ptjdhb?file=src%2FApp.vue Hopefully this helps. Happy Tweening!

please the below 2 pencode the first 1 work just find while using gsap2 but the second one not working after convert to gsap3 please click on the button "Rotate Rectangle" to see the problem that i am looking for working pen A Pen by Mohammed (codepen.io) notworking pen A Pen by Mohammed (codepen.io)

Hey, thank you for your answer, first i thougt this is the Problem , but wenn comment that out , nothing changes... U checked the testsite from my link ?

Indeed as always, Mitchel hit the nail right in the head, is far better in this case to use scale for this: https://stackblitz.com/edit/vue-hzx8ql?file=src%2FApp.vue Hopefully this helps. Happy Tweening!

Hi, This seems to be related to this thread, right? Happy Tweening!

Hi, Just use the getProperty method: https://gsap.com/docs/v3/GSAP/gsap.getProperty() https://codepen.io/GreenSock/pen/LYoWebp Open the demo in a different tab and open the devtools console to see the log. Hopefully this helps. Happy Tweening!

Hi, Is really hard for us to do a lot without a minimal demo (emphasis on minimal), but I had a quick look at your CSS and found this: html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; -webkit-box-sizing: border-box; box-sizing: border-box; vertical-align: baseline; font-family: 'Rosario-Regular', Arial, Helvetica, sans-serif; font-size: 100%; scroll-behavior: smooth !important; /* <- HERE! */ } You have scroll-behavior: smooth in all those selectors, including the html and body elements. Definitely remove that and see what happens. Happy Tweening!