Search the Community

Hey gang, I recently started working with the GSAP library and want to achieve some advanced effects. If you go to this link (https://dusan-portfolio.divhunt.art/#projects) and check the case studies section you will see that I'm trying to combine some horizontal scrolling effect with the background color that changes for each project. I kind of achieved some results but it's far from perfect. Hope someone can suggest to me the best way to recreate this, here is my code: //PROJECTS - scroll animation gsap.to("#project-list", { x: "-444%", ease: "none", scrollTrigger: { trigger: ".t-125", endTrigger: ".t-173", start: "top center", end: "center 45%", scrub: 1, markers: true } }); //PROJECTS - Color yellow gsap.to(".t-117", { backgroundColor: "#FBFE67", ease: "none", scrollTrigger: { trigger: ".t-125", start: "top center", end: "bottom center", toggleActions: "play none reverse none", scrub: 1, markers: true } }); //PROJECTS - Color Orange gsap.to(".t-117", { backgroundColor: "#FC7753", ease: "none", scrollTrigger: { trigger: ".t-141", start: "top center", end: "bottom center", toggleActions: "play none reverse none", scrub: 1, markers: true } }); //PROJECTS - Color Blue gsap.to(".t-117", { backgroundColor: "#3185FC", ease: "none", scrollTrigger: { trigger: ".t-157", start: "top center", end: "bottom center", toggleActions: "play none reverse none", scrub: 1, markers: true } }); //PROJECTS - Color Green gsap.to(".t-117", { backgroundColor: "#38FB6F", ease: "none", scrollTrigger: { trigger: ".t-173", start: "top bottom", end: "bottom center", toggleActions: "play none reverse none", scrub: 1, markers: true } });

Hello, could you please help me. I'm trying to attach tweens to timeline in Nuxtjs like that: tl.value = gsap.timeline({..}); and tl.value.to({...}); but animation not playng, but onStart event fires and tl.value.duration() returns 1. But if I use chain like tl.value = gsap.timeline({..}).to({..}) it's works fine. Here is simple example: https://codesandbox.io/p/sandbox/mystifying-waterfall-i2cwtp?file=%2Fpages%2Findex.vue%3A1%2C1 . Thank you!

Hi, I want to do this video. All content goes to the center in Zoom in/out. Could you please give me a hint? Video link: https://fiverr-res.cloudinary.com/video/upload/t_fiverr_hd/v1/video-secured-attachments/messaging_message/attachment/a5379de46d077980d280c733bfd23b85-1685272686476/IMG_9314?__cld_token__=exp=1685404524~hmac=229d38e5b3974e0de4b36336812a7fc3054ea9fc49cd79f5f6b0ae04f7de8180

Hi i have a code from pen but i dont know how to move to next section 3 without create more spacing below section 2 ??

Hello @GSAP Helper I’ve been a GSAP animator for many years developing banners using HTML, CSS and JavaScript I’ve now moved into the Motion Designer role using Adobe After Effects and Blender 3D. Unfortunately everything thing is key frame based in these programs I honestly really miss the efficiency of GSAP. My favourite era was when we could use a hybrid Adobe Animate/Flash timeline and program GSAP to make animations Is there any chance there is a way to use GSAP in Blender 3D? It has a panel for scripting but I can’t figure out how to use GSAP with Python/Blender API The only way to use GSAP with 3D these days, is to export the model and animate in the browser Blender would be a very powerful tool is we could GSAP inside the programs like the Adobe Animate/Flash days Thanks for your time!

I have applied id="smooth-wrapper" and id="smooth-content" by wrapping with div. But it is not working. I followed https://codesandbox.io/s/stupefied-minsky-pzceim?file=/src/App.js:733-752 but couldn't understand how to apply ScrollSmoother in these component based structure.

Hello Everyone I hope you are doing well. I have a problem relating to the circle radius increase decrease pointer. so it works like when you drag the pointer away from the circle's center point it increases its radius and decreases when dragging towards the center point. it works fine but the pointer moves away from the circle border when you drag your mouse away from the pointer on the x-axis. I have provided the code pen so you can check it out thankyou ❤️.

Hi all, Lets say, I have a section and it's total height is 1200px. And I set it's height 100px and use overflow hidden with CSS to hide the other 1100px. My goal is when user scroll to see the other section(below the section I'm talking about) until the remaining 1100px is scrolled. after that people can see the other sections below it. I was able to make a demo, but it not working properly. Is it possible to achieve my goal using GSAP? Please see the video for better understanding. https://www.veed.io/embed/d61cde25-3dbd-4e40-8a32-fbe4ae94fa9d

Hello Team, Following code pen has click event anywhere on page, 1. Could you please assist me in transforming jquery to equivalent result using gsap. 2. Also please suggest how to achieve same result if by clicking any 5 menu items that animates radial clip path entire page by originating from any one menu item. ( Example: Clicking any navigation item from website: https://www.choreograph.com/ ) Regards Prad.

hello all; its my first post here. ı look arround for this animation but cannot find similar one so ı made my animation. Still have some problem with sticky. Before animation start unset position so GSAP can detect my element hight and place markers in correct points. But ı guess it's still not fine for best practice. I'm open advices and ideas. Thanks all

I want to grab the value selected on a range slider and use it to change the speed of my tween. I'm new to this, so I'm hoping this is a simple one. It looks like I need to refresh or restart the animation every time I change the value of the slider. In the example here, tl2 is restarted and played when the button 'Shot 2' is clicked... but the variable called speed (grabbed from the slider) doesn't seem to ever be updated in the tween.

Hello I Hope you all are doing well. I am facing some issue is that Draggable onDrag returns this.rotation angle value incorrect. Please see the Image const pointer = Draggable.create(".rotate-pointer", { type: "rotation", onDragStart: (e) => { const gElement = e.target.closest("g"); const idx = gElement.getAttribute("id"); selectedRadiusPointer = idx; roundTableDraggable[idx].disable(); // pointer[idx].disable(); }, onDrag: function () { const rotation = e.target.getBoundingClientRect(); const parentG = document.getElementsByClassName(`table-${selectedRadiusPointer}`)[0]; TweenLite.to(parentG, { rotation: this.rotation || 0, transformOrigin: 'center center' }); console.log(this.rotation, 'rotation') }, onDragEnd: () => { roundTableDraggable[selectedRadiusPointer].enable(); }, }); This is my code and this is rotation angle values

I'm working on a prototype for a mobile-only website. The concept is, that there is an image with a route on it and the page scrolls along the specific route. The image with the route is larger than the screen and will be updated with x/y transforms to follow the route during the scroll. I've created a GSAP timeline with the different points on the route and synced it to a GSAP ScrollTrigger instance. The trigger ('.scroller'.) is an invisible div with a height of 2400vw, which solely functions as the scroll distance. The demo is visible on: https://scrolltrigger-test-ib0bhfhl2-tom51north.vercel.app/. The demo works smoothly on desktop (use the mobile debug tool). However, on iOS the whole animation is kind of buggy/laggy when you scroll down the page and I can't find out why. I also have added a FPS meter, but that also shows 60 fps. Does anyone have an idea why the whole animation is buggy and how I can fix it? const scrollTl = gsap.timeline({ scrollTrigger: { trigger: ".scroller", start: "top top", end: "bottom bottom", scrub: true } }); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '-33vw', y: '-59vw', ease: 'none' }, 0); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '7vw', y: '-91vw', ease: 'none' }, 1); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '47vw', y: '-130vw', ease: 'none' }, 2); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '-4vw', y: '-169vw', ease: 'none' }, 3); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '-57vw', y: '-203vw', ease: 'none' }, 4); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '-106vw', y: '-244vw', ease: 'none' }, 5); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '-68vw', y: '-270vw', ease: 'none' }, 6); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '-9vw', y: '-264vw', ease: 'none' }, 7); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '26vw', y: '-292vw', ease: 'none' }, 8); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '64vw', y: '-322vw', ease: 'none' }, 9); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '14vw', y: '-375vw', ease: 'none' }, 10); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '-38vw', y: '-410vw', ease: 'none' }, 11); .scrolltrigger-test { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: #008238; } .scrolltrigger-test__visual { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; } .scroller { position: absolute; top: 0; left: 0; width: 100%; height: 2400vw; } .scrolltrigger-test__visual-background { position: relative; } .scrolltrigger-test__visual-background-image { display: block; position: relative; width: 280vw; height: auto; top: -10vw; left: -72vw; }

Hello, I added simplebar js to my ongoing project to customize the scrollbar, but there is a conflict. I think the styles come when gsap is disabled, but the simplebar styles do not work when gsap is active. Can you help me?

Hello I hope you are doing well. I want to achieve that the small circle located on the border of circle when someone drag this in any the circle or svg group should rotate in that direction i'll post an examples so that you (respected helper) can understand. i have provided the code so please update it their. Thank you very much this comunity is very helpful i am loving it thanks : )

Hello, Smoothscroller and Smooth Scrollbar version but I couldn't get the Smoothscroller feature to work. I think there is a point where they overlap. Can you help?

Hello i want to bound the object to be dragged only the border of the circle . i have provided the codepen in which small circle is bound to be dragged only inside circle but i want to bound it to be dragged only on the border this codepen is not but please modify this code alittle so that it meets my requirments thanks alot : )

Hi, I started using GSAP recently and I like this library but I stuck for now. I want to slide elements back to right side position after having already scrolled to the next vertical section. The idea is that there is no empty space left after horizontal scroll ends. I can use this approach to prevent it: x: () => -(container.scrollWidth - document.documentElement.clientWidth) + "px" but this is not exactly what I want, because if there are not many elements and they fit into the screen, it will just stand there until I scroll to the next section. Thanks for your help 🙏.

Hi, i'm trying to make a parallax effect on the background. i"m trying to access to div using the class generated by react when i load the page the script run but the gsap code shows an error but when i copy paste the same script i runs well

I have an Image reveal while hovering over a text, what I want is something like on this site https://dennissnellenberg.com/ on Recent work section

Every time Pinned section appear gsap add extra css code shift that section to right

Hi, i try to make a pinned element on my page. If you go to the section "Découvrez mon histoire" all down (or discover link in the menu) the section on the right should be pinned. but i don't understand why, the fixed position is relative to the page instead of the screen. I tried to do the same on codepen, and everything works well. Do you have any idea ? https://justhugo.fr/

Hi there, I am having a very bizzare issue. I am almost done with a project on SvelteKit, which uses GSAP for animations. Everything was going perfectly well, untill I built the production version. After deployment everything seemed to work fine - all pages load and the appropriate animations are there. However, when you try to reload a page (other than the home page), the following error occurs. Uncaught (in promise) TypeError: (intermediate value).gsap is undefined Immutable 19 Because of the fact that the problem occurs only in production (only when I run the npm run build), and it is perfect when I run npm run dev, I was not sure how to show you this instance with a CodePen. So here is a simplified version of the http://stagger.fragment.bg. And here is the link to the GitHub repo https://github.com/kodes-agency/fragment-test. Here is a video that ilustrates the issue: http://api.fragment.bg/uploads/Issue_0_21_798db83bc7.mov I am really clueless why this happens. I will appreciate every input into how to solve this issue.

I'm working on a y-axis direction movements animation, where changing the y-axis of the sections with scrolltrigger to achieve an upward-moving animation effect is leaving a summed-up unwanted gap between the last section and the footer, is there a "scrolltrigger" way to fix this?

Hello, I wanted to make a horizontal scroll structure under four headings. And these four titles have their own content and the videos will be side by side and will be horizontal scrolling while scrolling. and when the content content is finished it will move to the next one. I made a script like this but when I get to the title the pin works correctly but the horizontal scroll does not move. can you help me?