Gigi1303 Posted January 13, 2023 Share Posted January 13, 2023 Hi guys, I know this question will sound trivial to you but I'm basically stuck here. I'm not able to attach a codepen but I'll try to make the question as easy as possible. Basically, I have a foreach loop for pinning every section of my website, and that works very well. In addition to that I have 3 different timelines to change the body background (if you look at the example below) let backgroundChange0 = gsap.timeline({paused:true}); backgroundChange0.to('body', {backgroundColor: '#fffce4'}); let backgroundChange1 = gsap.timeline({paused:true}); backgroundChange1.to('body', {backgroundColor: '#FFDD00'}); let backgroundChange2 = gsap.timeline({paused:true}); backgroundChange2.to('body', {backgroundColor: '#000'}); gsap.utils.toArray(".dds-panel").forEach((panel, i) => { let mainTl = gsap.timeline({ scrollTrigger: { trigger: panel, onEnter: () => backgroundChange[i].play(), onLeaveBack: () => backgroundChange[i].reverse(), start: "center center", pin: true, pinSpacing: true, toggleActions: "play none reverse none", invalidateOnRefresh: true } }); } I know this looks messy but I have to change the background color to different ones before pinning the section panel. The problem is that I can't make that backgroundChange[i] work inside onEnter, I even tried passing it as a string like ("backgroundChange" + i) but it doesn't work. My goal is to use the forEach index to dinamically change to backgroundChange0, backgroundChange1, etc. inside the onenter and onleaveback event. Thanks a lot for your help, let me know if it's clear, otherwise I will try to make a codepen with minimal coding. Link to comment Share on other sites More sharing options...
GSAP Helper Posted January 13, 2023 Share Posted January 13, 2023 It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. Link to comment Share on other sites More sharing options...
Gigi1303 Posted January 13, 2023 Author Share Posted January 13, 2023 Thanks a lot @GSAP Helper. I made a simplified pen of what I wanted to achieve, here it is: See the Pen ExpXELE by luigi-basile (@luigi-basile) on CodePen Let me know if that helps. Link to comment Share on other sites More sharing options...
Rodrigo Posted January 13, 2023 Share Posted January 13, 2023 Hi, Maybe you could get some inspiration by this video and example by @Carl See the Pen KKvQOKY by snorkltv (@snorkltv) on CodePen Hopefully this helps. Let us know if you have more questions. Happy Tweening! Link to comment Share on other sites More sharing options...
GreenSock Posted January 13, 2023 Share Posted January 13, 2023 Here's an approach you could take (if I understand your goal correctly): See the Pen GRBEBWe?editors=0010 by GreenSock (@GreenSock) on CodePen Enjoy! Link to comment Share on other sites More sharing options...
Gigi1303 Posted January 17, 2023 Author Share Posted January 17, 2023 Thanks a lot for your inputs! I'll make some test and report you back, I like both solutions. The second one has the advantage of having the bg color as a data attribute which is very nice. Thanks again @GreenSock and @Rodrigo Link to comment Share on other sites More sharing options...
Gigi1303 Posted January 17, 2023 Author Share Posted January 17, 2023 Made some test, works good but i'd like to ask you some more questions: - Is it possibile to make the bgcolor animation start earlier, without changing the scrolltrigger start value? That's because that value works good for the pinning. - When you scroll back, I'd like to make the background change as soon as possibile, ideally before the text starts appearing onscreen. Is it possibile without changing the scrolltrigger start value here too? - Last question: can we make that the bgColor reverts to the previous section data-panel-bg attribute instead of setting an initial body Bg value? The Greensock codepen is still valid for these last request: See the Pen GRBEBWe by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted January 17, 2023 Share Posted January 17, 2023 You can't use only one ScrollTrigger and have it trigger pinning at one time and the animation at a completely different point. But you can very easily just create a separate ScrollTrigger for the animation(s) so they trigger earlier/later (like 100px earlier in this example): See the Pen mdjBpNV?editors=0010 by GreenSock (@GreenSock) on CodePen I hope that gets you moving in the right direction. 1 Link to comment Share on other sites More sharing options...
Gigi1303 Posted January 19, 2023 Author Share Posted January 19, 2023 Very interesting @GreenSock. I don't know why but I thought that using the same trigger for two different Scrolltriggers wasn't good practice. Thanks a lot. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now