Danclp

@Rodrigo Thanks for picking up the call. Yup, I learnt the technique from her video. I was trying my luck to see if I could hear a second opinion. Anyway, thank you so much for all the patience and help. Hopefully, I will be strong enough to be the next contributor soon. And teach people what I have learnt. Take care, mates.

@mvaneijgen Thank you very much for the response. It seems like different people have got their references. Nonetheless, there is no right or wrong. However, I am more towards your direction on day one, too. After studying through your refined codes and cleaning up mine, the visual final shows. However, I have another question. If you look at my JS lines 32 and 33, we previously used. It no longer works after I inserted more lines (refer to JS lines 55 to 61). So, I used the "clamp" to solve the issue. Do you have any idea, and can you enlighten me why? https://codepen.io/danclp/pen/oNOPEWm

Hi there, It seems like I am still unfamiliar with ScrollTrigger. When working with a website similar to the previous one, the problem occurs every time. This is my third time checking out with you guys. Hopefully, you can continue to assist me. Please read through my brief introduction below to understand my problem. Thank you. I will have an auto-run animation when the website loads (this is set in JS lines 10 to 25). Once the animation finishes, the user can scroll the site to push out the Home's contents and call in the next section, the Intro (this is set in JS lines 27 to 85). It works just fine before I insert the lines for calling the "Intro" section (Home: JS lines 27 to 57, Intro: JS lines 59 to 83). I understand that I may be able to combine the ScrollTrigger command into one big chunk of action, from Home to the last section. However, I remember someone advised me not to make the command lines so complicated and to do it section by section. So, what is the correct way if I do it section by section? And most importantly, what could be my problem this time? Thank you, and I look forward to all your assistance and advice.

Thanks, Rodrigo, for your kind opinion.

Hi Rodrigo, I did some experiments after reading through your response. The animation goes back to normal after the window is resized. However, we can't just ask the visitors to resize the window to see the effect, right? And, I am unsure what you mean by "the order things are called". Assuming I am right, I moved the About section above all other animations. However, the problem still occurs. Then, I try to comment out the command lines one by one. I noticed that as long as the "homePlanet" animation is not calling. Everything will work just fine, as you showed me in your reply. So, I started asking myself about my looping rotation and its speed. Please see my codes below. planet .to(".dot-line", { repeat: -1, rotation: "+=360", duration: 100, ease: "none", transformOrigin: "center center" }) .to(".planet", { repeat: -1, rotation: "+=360", ease: "none", svgOrigin: "431.92 431.92", duration: 30, overwrite: "auto" }, 0) .to(".planet-ab", { repeat: -1, rotation: "+=360", ease: "none", svgOrigin: "566.76 566.76", duration: 60, overwrite: "auto" }, 0) I am using duration to control its speed. I wonder if it could be the duration that caused the issue. This looping feature involved 2 sections, which you can see in the below codepen link. https://codepen.io/danclp/pen/KKEarwe The rotation works as a continuing animation, even after it has been scroll-triggered away in the first section. You can still see the rotation animation available in the second section (the sliding text section). Did I code correctly, or does it have another way of calling when we want it to animate continuously? Also, should I use duration or something else when I want to slow down the rotation speed? Can you give me some advice? Thank you.

Hi Rodrigo, First of all, I would like to wish you a wonderful year in 2024. And my sincere apologies for all the inconvenience caused. You are right, and the code has a resize event. However, it is meant for the "SplitType". So, the "SplitType" function will regenerate upon resizing the window. After reading your response, I have been mongering the codes the whole day. The ScrollTrigget event should not only happen when the window has been resized. And the problem became worse after removing the resizing event. Line 175 onwards is the code triggering the section I am struggling with. However, above that are codes that call the rotation of the circles. As well as the ScrollTrigger event for the top rocket part. I hope I have given you enough information to help. Until then, thanks a million for being patient.

Hi GSAP Fellows, I have some problems with my GSAP implementation. I understood that we should give a minimum demo every time we ask for help. However, I mainly use SVG codes, which made the codes look huge. Please tell me if you can help. My first section worked tremendously; the rocket moved out of the screen as planned. Regarding the next section, revealing the title text with the ScrollTrigger request, the markers remained in the first section. I tried to remove the first section for debugging, and it solved the problem. So, I am unsure what the problem could be with the two sections' ScrollTrigger request. Could anyone give me some guidance on what I have done wrong? Thank you all in advance.

@mvaneijgen Thanks!

Hi Rodrigo, Noted. I am a designer and a self-trained web developer. I may not be able to understand overly complex JavaScript solutions either. ?

Hi Rodrigo, Understand. I was just trying my luck to see if there are any other possible answers. Anyhow, the earlier suggested method works perfectly fine with my codes. Once again, thanks a million for your patience. Have a great day.

Hi Rodrigo, Once again, thanks for the reply. I will give this suggestion a try. However, if this is not the best practice, in my case, putting everything inside the MatchMedia instance may not work either. "Section 5" is the only section I have problems with on different devices. Do you have any other recommendations that you could provide me with? I hope I am not taking things for granted, as I am the only brain on this development. So, suggestions are pretty much appreciated.

Hi there, I know I have been advised to set up the timeline one section after another. Since my ScrollTrigger animation works smoothly and well after a few tries. I have become lazy to change the format anymore. Anyway, there is still one small thing that I couldn't figure out, the MatchMedia. Is it possible that we can insert the MatchMedia command line in between the timeline? If the answer is yes, I wonder how does it work? Through the research, I had no luck getting similar references (or maybe I didn't search properly). As you can see in the attached screenshot, I intend to keep the content centred on the desktop mode and be able to scroll through the screen while on mobile. However, with my current code, how do I implement MatchMedia though? Can someone kindly give me some guidance? Thank you. .fromTo(".section-4 .text", { xPercent: 100, }, { xPercent: 0, duration: 1 }, "<") .to(".section-4", { autoAlpha: 0 }) .to(".section-5", { autoAlpha: 1, duration: 1 }) // MatchMedia condition to be applied here? .fromTo(".section-wrap", { yPercent: 0 }, { yPercent: -85, duration: 2 }, "<+=0.5") // End here .to(".section-5", { autoAlpha: 0, delay: 5, duration: 1 })

Hi Rodrigo and Cassie, Noted with the response, and thanks a million for the kind help. I will give that a try.

Hi Rodrigo, You hit my head hard enough to wake me up. I never thought of doing it that way, "give wrapper a 100vh and an overflow: hidden, then move the object up with yPercent"... ? I am a designer-born web developer, know not much about programming. To clarify, when you say create ScrollTrigger instance for each and pin each one, are you referring to the format below? gsap.to("selector-1",{ xPercent: 0, duration: 0, scrollTrigger: {} }) gsap.to("selector-2",{ xPercent: 0, duration: 0, scrollTrigger: {} })

Hi Cassie, So sorry to disturb you again. When I thought things were solved, another problem spent my whole day with local and codepen debugging. After adding in a few more animation commands, the horizontal scrolling image no longer finishes its scrolling. I activated the "markers" which shows that the "end" mark stops before all the section commands are finished. Animation on "section-4 and section-5" is not working. I tried to add in "end: '+=12000'". It doesn't seem to help, either. I am not sure where caused the problem. Can you give me some hints and guidance again? Below is the code pen link after Fork. https://codepen.io/danclp/pen/oNQBzXw