Sveninyo

Hello @iamruletik welcome to the GreenSock forum To get quick and helpful answers here, I advise you to first create an account on CodePen. Then post your CodePen and describe what you want to do. Secondly, I would advise you to learn the basics of frontend development (HTML, CSS, JS). If you use tools like Webflow you will get fast results but you will never understand 100% what is going on under the hood.

@Rodrigo I added a 0 between curly bracket and bracket }, 0); to make it start at the same time. Now its just like I wanted it! Thank you!

Hello @akapowl , @Carl just told me to make a pen. So here it is: https://codepen.io/Sveninyo/pen/ExONmrJ He also shared this with me: https://codepen.io/snorkltv/pen/vYLvZKY??editors=0010 This is almost what I want, but just "scrubbable". Like I said, the my code works fine, I just think it isn't neat. I will check your links now. Thank you anyway! The support here is world class!

Hello, I have a general question. How can I avoid redundant code (following DRY principles) using GSAP (especially ScrollTrigger)? For example, the code below works just fine but It repeats 3 times and I don't want that. Isn't it possible to "store" the scrollTrigger information in a variable (since it's always the same) and apply it to the animations? I tried it with ScrollTrigger.create() but that doesn't work. I'm pretty sure this topic is covered already, I just can't find it. Please just point me to it. I can solve it myself! Thank you in advance! gsap.from("#cloud-front", { scrollTrigger: { trigger: "#rocket-animation", scrub: true, start: "top 95%", end: "top 5%", markers: true }, y: 160, }); gsap.from("#cloud-back", { scrollTrigger: { trigger: "#rocket-animation", scrub: true, start: "top 95%", end: "top 5%", markers: true }, y: 80, }); gsap.from("#rocket", { scrollTrigger: { trigger: "#rocket-animation", scrub: true, start: "top 95%", end: "top 5%", markers: true }, y: 240, });

Thank you, I will study your pen. I just bought Carls Courses yesterday. I'll keep that in mind for sure. I just thought so. Just didn't know any better.

Hello, I have made a section reveal effect based on the demo by Zach Saucier (https://codepen.io/GreenSock/pen/BaowPwo). So far everything works fine, however I want to change the background color of each section from black to white as soon as they are revealed. Currently only the first section changes the color. What am I doing wrong? Thank you for your help.

Sure. The animation has to be INSIDE the function ... ? Also the const is not needed (anymore). Thank you heaps!

Hello I'm trying to combine an array of each element (a class in this case) with a ScrollTrigger Timeline animation (simple fade-in, fade-out). But it doesn't work. The console doesn't show any JS errors. I attached a Pen with my code. Thanks for the help.

Cool! Thank you. I learn a lot here ?

Hi, I am wondering, why my transition animation is just played on my first section and not on the following. I added the same class (.parallax) to both my text boxes. Isn't the animation suppose to play on every (each) element that has the class "parallax" applied to it? See my CodePen. Thank for the help!

Hello, I made a simple page transition (block reveal) animation with GSAP and barba.js. The animation works fine, but I have a flickering effect because the new page loads before the "leave" animation is done. I don't know how to fix this ... maybe a JS wizard could help? I attached the file. Thanks, page transition.zip

Yes! I think that's it! I will just start learning how to use ScrollTrigger now! ☺️ Thank you!

Hello, I'm new here and I want to learn about GSAP. With my Wappalyzer browser add-on I've found out that many websites that use GSAP have a "delay/smoothing effect" when scrolled down. It's hard to explain, but it feels like the scroll behavior is different than with "normal" websites. To better understand what I mean, here's are some links to websites that have this kind of effect. https://thinkbear.net/ or https://pureemaison.com/en/ or https://fleava.com/about If this question is already answered, please post the link. Thank you very much! Sven