All Activity

Hi, Maybe something like this: https://codepen.io/GreenSock/pen/QWRyNOZ Hopefully this helps Happy Tweening!

Thanks for sharing those examples, I can see how some of those might be helpful in dealing with the math/rotation of the SVG. I played around with using motionPath for the autoRotate feature and it's getting closer https://codepen.io/dpickering/pen/LYoGpbO If you move your cursor up or down you'll see that each tire track svg isn't following each other by staying on the polyline.

Thank you, Jack! This definitely works better. But I still encounter a bug. For example, I didn't change your code at all, but I changed the text from: <div>Tell us<span class="text-gradient"> more</span> about your business</div> to: <div>Where is your<span class="text-gradient"> business</span> based?</div> And damn, now it splits the text into two lines, but it doesn't do it correctly. I am attaching my codepen where you can see this: https://codepen.io/ProjectDCL/pen/xxNZZXm Also if you add other text: <div><span class="text-gradient">Additional</span> information</div> With this approach, the text inside the span is wrapped in two divs. This isn't exactly a problem from a styling point of view, but this behavior doesn't exist when adding other text. And truly, when I switch between my slides in project sometimes (in 10-15% I still see how some words stick together). I just don't understand why this happens. I use SplitText on many projects and have never seen such a problem. You are doing amazing things, maybe I am doing something wrong.

Mhh.... maybe you have both packages installed but installing the premium one with this command line should replace the previous installation: npm install gsap@npm:@gsap/CLUB-LEVEL What you could try is remove GSAP and delete the package-lock.json file and then install GSAP with the bonus plugins. The other thing that I missed in the first post is that you're working with NextJS, so you need to import from the dist folder in order to use the UMD modules: import gsap from "gsap"; import { MorphSVGPlugin } from "gsap/dist/MorphSVGPlugin"; if (typeof window !== "undefined") { gsap.registerPlugin(MorphSVGPlugin, useGSAP); } Hopefully this helps. Happy Tweening!

Hi, The container of the element you are rotating needs a perspective applied to it, otherwise the rotation will be applied in 2D; https://developer.mozilla.org/en-US/docs/Web/CSS/perspective https://3dtransforms.desandro.com/perspective Something like this in your CSS: .home__contact__bean__container { position: absolute; width: 100%; height: 100%; right: 0; top: 0; perspective: 250px; overflow: hidden; } Play with the value and see what works better for your taste. That value looks good IMHO. Hopefully this helps. Happy Tweening!

Hi @philcharitou and welcome to the GSAP Forums! Just a syntax issue! In keyframes land the easing for each keyframe is easeEach not ease: // Wrong gsap.to(".animate-sway", { keyframes: { y: [0, 18, 8, -8, 0], rotate: [-8, 3, 8, -3, -8], ease: "none", }, repeat: -1, duration: 3, }); // Right gsap.to(".animate-sway", { keyframes: { y: [0, 18, 8, -8, 0], rotate: [-8, 3, 8, -3, -8], easeEach: "none", }, repeat: -1, duration: 3, }); https://gsap.com/resources/keyframes/#percentage-keyframes---v39 Here is a fork of your demo: https://codepen.io/GreenSock/pen/YzbwwYz Hopefully this helps. Happy Tweening!

I am trying to rotate Image in the example i shared but its too vague, how i can make it more good? like interms of 3d Example: https://stackblitz.com/edit/stackblitz-starters-pmqxre?file=app/page.tsx

Sorry. All good now. Thanks!

Sorry about the delay and the confusion, @Grene Thanks for pointing this out - there was indeed a bug that could affect orientation changes (they wouldn't fire a ScrollTrigger.refresh() properly. That should be fixed in the next release which you can preview at: https://assets.codepen.io/16327/ScrollTrigger.min.js In the meantime, there's an easy workaround: let mm = gsap.matchMedia(); mm.add("(orientation: portrait)", () => { ScrollTrigger.refresh(); return () => ScrollTrigger.refresh(); }); Technically, you could do this instead, but I don't think it's as well-supported across browsers: window.addEventListener("orientationchange", () => ScrollTrigger.refresh()); Does that resolve things for you?

I'm rather new to GSAP, so apologies if this is a simple question, but I couldn't seem to find the answer anywhere. As you see in the codepen, I'm trying to animate this boat to appear to "float" in a static position using keyframes. However, between each keyframe there is a distinct pause for a quick moment before the next one begins. I've tried every easing function listed in the docs, I think sine.inOut works best sorta but none of them are smooth. Is this something simple I'm missing? Or perhaps the type of animation I'm trying to achieve is more complex than 5 keyframes. Thank you!

From the docs: There is a helper function that can help in that situation. You also need to make sure the elements are in the document flow so that calculations can be done correctly, but you had display: none on the parent. So you could toggle that for the split. https://codepen.io/GreenSock/pen/RwmrWPy?editors=1010 Better?

Thanks. Tried that again - no effect. Saw that in the Forum and tried it earlier. Any other ideas? I appreciate your help.

This thread may be helpful: Good luck!

Just to let you know @ElevateBrands - we have a Smooth Scrolling plugin that replaces locomotive (and solves a lot of pain points), https://gsap.com/docs/v3/Plugins/ScrollSmoother/ Just mentioning as if you're hitting issues and considering paying for a freelancer, it may an option to pay for ScrollSmoother to make the process smoother (excuse the pun).

Ahh, makes total sense! Thank you folks for the excellent input, I'll share a more specific/targeted example if anything else comes up. Appreciate it!

Hi, You can borrow some of the logic in this demo: https://codepen.io/GreenSock/pen/jOQXYzV Hopefully this helps. Happy Tweening!

Hi @Wardo and welcome to the GSAP Forums! If you have the regular GSAP version installed before upgrading to the bonus tier, you could delete your package-lock.json file locally and push to your repo in order to trigger a deploy and see if that helps. Finally thanks for being a GSAP Club member and supporting GSAP! 💚 Hopefully this helps. Happy Tweening!

Hi, As Mitchel mentions is super hard for us to do much without a working demo, so checking our Stackblitz collections (the NextJS one) should be a very good first step. Finally I'm curious about this: tl_slide.from(el[1].current, { x: -100, // opacity: 0, }) Those elements you are animating there are the same ones that have these styles applied to them? .el { display: flex; flex-direction: column; border-radius: 8px; transition: all 0.35s ease; padding: 40px; &:nth-child(1) { padding: 40px; } Animating an element that has CSS transition all with GSAP is generally a bad idea as Jack explains here: Hopefully this helps. Happy Tweening!

Hi, The main issue here is that you're pinning an element whose height is not the height of the viewport: .service-slider_wrapper { overflow: hidden; max-height: 500px !important; } const slider = document.querySelector(".service-slider_wrapper"); const pin = gsap.to(rightSections, { yPercent: -100 * (rightSections.length - 1), ease: "none", scrollTrigger: { trigger: slider, pin: true, invalidateOnRefresh: true, start: "center center-=100", scrub: 1, end: () => "+=" + (slider.offsetHeight || 0), markers: false } }); Because of the way pinning works, that creates the extra space after that element. The solution is to wrap that element and the next with an extra element and pin that one: <div class="pin-wrapper"> <div class="roadmap-sec"> </div> <div class="bottom"></div> </div> const pin = gsap.to(rightSections, { yPercent: -100 * (rightSections.length - 1), ease: "none", scrollTrigger: { trigger: slider, pin: ".pin-wrapper", invalidateOnRefresh: true, start: "center center-=100", scrub: 1, end: () => "+=" + (slider.offsetHeight || 0), markers: true } }); Here is a fork of your demo: https://codepen.io/GreenSock/pen/PovZoRv Hopefully this helps. Happy Tweening!

Hi @Guillaume Ducuing welcome to the forum! I cant see anything obvious from just the code snippets. Codepen isn't always the best platform to get your demo ready, have your seen our Stackblitz starter templates these gets you up and running in most of the major frameworks. What I can see is this line in your CSS `transition: all 0.35s ease;` which always is a red flag. If you have an animation with GSAP on an element and this line of CSS will interup all animations and things will break. Due to not having a demo I'm not able to test it for you to see if this fixes the issue, but personally I would not use the word 'all' and always define the properties I want to transition and never transition an property that GSAP is also animating. Hope it helps and if not try and see if you can reproduce the issue in one of our stackblitz templates and we will be able to help you debug and happy tweening!

Hello! I have an issue with ScrollTrigger; I want to pin the container on scroll to start with (then I will animate some elements). I have done this in several projects with the same code (same imports and same structure), but in this particular project, it doesn't work. In fact, the container just "jumps" instead of following the scroll. Do you see anything in the provided code that could help me? Thanks! (I wasn't able to get the CodePen preview to work, but here is the link for the CSS + JSX, and I'll also include a video to show the current result.) "dependencies": { "@gsap/react": "^2.1.1", "gsap": "^3.12.5", "next": "^13.5.6", "react": "18.2.0", }, ScrollTrigger.mp4

Oooh, great article with a lot of great tips! Thanks again, Mitchel. I'll also experiment with slicing the final shape as you suggested. 🙂

Hi, There is nothing wrong with passing a prop to a child and there is nothing wrong to import GSAP and create a GSAP Context instance on every component, especially if the component could be unmounted before the parent. Honestly I prefer to import GSAP and create a Context instance on every component, you'll hardly see any dip in performance with that approach. Finally there is no need to store the GSAP Context instance on a ref and make it a reactive property, since I can't think of a reason to track updates to a GSAP Context instance on a Vue component, just use a variable: let ctx; onMounted(() => { ctx = gsap.context(); }); onUnmounted(() => { ctx && ctx.revert(); }); Hopefully this helps. Happy Tweening!

Hey Jack, Thanks for getting back, was bit sick with cold then on another job for a bit, haha yea tricky to almost impossible 😜 also asked Gemini AI as well and it said the x,y coords are not made available but offered a few workarounds but not pursued them as yet - did try a few crude ideas by moving a container around at certain time intervals but it was a bit rough and made the scrolling experience unpleasant - maybe if spent more time could smooth that out but actually be less hastle to adjust the svg a bit to play nice with scroll trigger and motion path 🤗 If do find a way will update the post, cheers, Paul

Thank you, Mitchel! 👌