All Activity

Hi there! This is because it's important to create your ScrollTriggers in the order they appear on the page. You have an event listener wrapped around the first one, waiting for the data to be ready, so the last ScrollTrigger is created before the first one. You can call ScrollTrigger.sort() to fix this issue. https://codepen.io/GreenSock/pen/BaeZrbo I've also rewritten your final tween as it's not animating anything so it makes more sense as a standalone ScrollTrigger, hope this helps!

Thank you so much!!!

Actually I found what causes this behaviour. It's OPACITY! Once I remove opacity from animation it starts behave like it should. I am not sure if this is gsap bug or css bug.

pinning a section with lottie animation with scrolltrigger offsets the start and end value of the other scrolltrigger https://codepen.io/wetwhite/pen/wvbeyBy

Yes!

Hi, I have a problem with subsequent pinned sections. It all worked fine when the sections had 100vh height, but now I need to reduce the height of the sections. If I simply make the section smaller, the pin creates huge white space around the pinned section, but if I set pinSpacing: false the second section overlaps the first. How can I solve this? Thank you very much.

I am using cdn, so i dont think its problem with the version. also I have added event listener "DOM content loaded". So when every thing is loaded after that my gsap scripts gets run. Plus its the text I am animating. But anyways. Thank you so much for your help 😊

Entonces, ScrollSmoother es pago?

There is probably something in your CSS conflicting with the perspective. I would bring it back to the basics and see what is causing the issue. Setting perspective on the element and animating its rotation works perfectly in GSAP, so the issue you're having has nothing to do with GSAP. https://codepen.io/mvaneijgen/pen/abrwEmP

Hi @Hayot welcome to the forum! There demo's are all on the demo page https://gsap.com/demos/?page=1&tags=ScrollTrigger Hope it helps and happy tweening! Here is the particular demo https://codepen.io/GreenSock/pen/eYpGLYL

There is an example in your video tutorial, but nothing was said about this particular animation. Help me please. Here is the video: https://www.youtube.com/watch?v=X7IBa7vZjmo. This animation is shown at 0:39

Staggers are a good idea and work perfectly, I hadn't thought about that option. Thanks!

Hi @mvaneijgen As you can see even in your codepen once animation starts perspective gets lost immidiately. I tried this solution before and it didnt help unfortunately

Then write a loop 😃. If you prefix all you tweens with tl.to() you can use them without them having to be connected and then you can just write normal Javascript .frorEach() loop around it. Seeing you're current setup I have the feeling your first item gets a different css, personally I like to start with all elements having the same styling and then let GSAP handle all the hiding and showing, this makes it a lot easier to create loops. For example having all elements visible by default and setting some tweens to .from(...,{opacity: 0}), will sometimes be easier. You could also look in to staggers https://gsap.com/resources/getting-started/Staggers/, adding yoyo: to the tween https://gsap.com/resources/get-started#repeats-and-alternating-repeats or/and when you transform the property you're animating in a function you get access to the current index and thus do logic based on that https://gsap.com/docs/v3/GSAP/Tween/#function-based-values I personally like writing out my animation by hand and then when everything is working as expected see If I can see a pattern in the code, usually there is and only the first and last item are different, but you only see that pattern if you have at least a view items eg 5 or 6. A time back I've written a post how I go about this, maybe it helps But there is no 'best' way, it is just personal preference and trial and error. If you still need help after this please share a minimal demo, so that we can dive directly into the code and help you debug. Hope it helps and happy tweening!

Hello guys, I have this code working properly in my site, but I would like to create a loop to rewrite the last part. What is the best way to approach this simple task? I don't know if the frozen sections will grow in the future so I need to iterate through all the #frozen-n elements, the last one have to end with opacity: 1. Thank you very much! if(somePage) { gsap.set("#frozen-1", { opacity: 1 }); let tl = gsap .timeline({ scrollTrigger: { trigger: ".frozen-section", start: "top top", scrub: true, pin: true, end: "bottom+=3000px", markers: true } }) .to("#frozen-1", { opacity: 0 }) .to("#frozen-2", { opacity: 1 }) .to("#frozen-2", { opacity: 0 }) .to("#frozen-3", { opacity: 1 }) }

Do you have any new ideas or workarounds for this issue? I am also experiencing it. In my case, the SVG renders correctly when I first visit the page. However, I notice that the ugly black borders appears when I minimize Safari for a few seconds and then maximize it again.

I'm using the vertical loop helper function and the Observer plugin to create a seamless gallery loop, worked great so far. But I need help, I can't figure out how can i reverse the vertical loop while it's already playing when I scroll upwards. Here's the code: // Infinite Scroll let infiniteGallery = verticalLoop(".image_layout", { repeat: -1, }); const loopObserver = Observer.create({ type: 'wheel, touch', onChangeY(self) { let factor = 3; if (self.deltaY < 0) { factor = -3; } gsap.to(infiniteGallery, { timeScale: factor * 3, duration: 0.15, }); gsap.to(infiniteGallery, { timeScale: factor / 3, duration: 0.15, onComplete: () => { if (factor < 0) { gsap.to(infiniteGallery, { timeScale: 1, duration: 0.1, }); } } }, "+=0.1"); } });

ScrollTrigger.observe is the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ build in to ScrollTrigger and ScrollTrigger.create is to create ScrollTrigger animation https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1, they are separate things. Hope it helps and happy tweening!

Hi @heim welcome to the forum! As far as I know perspective should be on the parent element, not on the element you're translating. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/VwOWzNj?editors=1010

Hi @sombrilla welcome to the forum! My general rule is don't animate things that are important, eg if text is really important on the site don't split it and also don't animate it. Have you seen the .matchMedia() function in GSAP? https://gsap.com/docs/v3/GSAP/gsap.matchMedia() with it you can change animations based on screen sizes, but also check for prefers-reduced-motion, so you can check if someone has set that they don't like motion on the site and then just do nothing. You can also leverage ScrollTrigger to have things trigger only when they are in view, I don't know if I would wait splitting when thing should animate, the nice thing for performance GSAP does is already calculating everything on page load, so that it only has to animate. And aria labels, yes! Hope it helps and happy tweening!

You should never apply CSS transitions to anything that JavaScript is animating because not only is it horrible for performance, but it'll prolong all the effects because whenever JavaScript updates a value (which GSAP typically does 60 times per second), the CSS transitions interrupt and say "NOPE! I won't allow that value to be changed right now...instead, I'm gonna slowly make it change over time". So it disrupts things, adds a bunch of load to the CPU because you've now got CSS and JS both fighting over the same properties, but let's say you've got a 1-second tween and the CSS transitions are set to take 1000ms...that means what you intended to take 1 second will actually take 2 seconds to complete. Without a minimal demo it is hard to give you advise, so if you need more help please provide one.

Thank you so much @Rodrigo

Hi @Rodrigo. Thank you for your instruction! I have seen the demo and am verifying it. Now I have one new question. What is the difference between 'ScrollTrigger.observe' and 'ScrollTrigger.create'? I thought it would be possible to use 'ScrollTrigger.create' instead of 'ScrollTrigger.observe' to move to the second section after all the slides in the first section are completed. Are there any differences between the two, such as faster loading speeds?

Hi GSAP community, I'm working on a project where I'm using GSAP to animate CSS variables. These variables are then tied to CSS transitions for various elements on the page. While the animations work as intended, I'm concerned about potential performance issues and would love to get some insights from the community. Here are the details of my implementation: I'm using GSAP to update CSS variables that control properties such as transform, opacity, and occasionally layout-related properties like width and height. The CSS variables are linked to CSS transitions in my stylesheets, allowing for smooth transitions when the variables change. The project involves animating multiple elements simultaneously, and I'm targeting both desktop and mobile devices. My main questions are: Are there best practices or specific strategies I should follow to minimize any potential performance degradation? Would it be more efficient to rely solely on GSAP for these animations instead of combining it with CSS transitions? If so, why? I would appreciate any advice, tips, or experiences you can share regarding this approach. Thanks in advance for your help!

Hello! For a website I'm working on we have a lot of text components with SplitText animations but we're getting some problems regarding accessibility (ie: screen reader) and performance (too many elements). For accessibility I think we can add aria labels to work around it or create elements with the text untouched. But unsure how to tackle the issue with too many elements. When we create the timeline the element is split even if it's paused, is it possible to split it when the timeline starts instead? In the second CodePen if you inspect the elements before scrolling, you'll see ".text" element already split. I was able to somewhat work around it by adding duration of 0.01 to the timeline (else onStart won't be triggered) then doing the fromTo inside the onStart but this causes other issues with ScrollTrigger when scrolling too fast (ie: jumping from one section to another via anchor). Workaround: https://codepen.io/sombrilla/pen/LYoLWeP Is there a better way to do this? Issue: