DavidLew

Sorry, mvaneijgen. I didn't notice you solved my problem already. ? I really appreciate your help. Some tutorials are truly helpful for a beginner like me. Thanks!

Hi mvaneijgen, Sorry for the inconvenience caused by unclear questions. The channel you recommended is fantastic! It makes 'form' and 'to' incredibly easy. Add one more timeline with 'from' immediately solving the scale-up and scale-down problem. However, the text opacity still doesn't work correctly. When I add the opacity text timeline after scale-up animation, the animation is overridden by the opacity of text. If comment out the text opacity timeline, the animation works perfectly. https://codepen.io/yinanlu0112/pen/rNJWrxW

Hi mvaneijgen, I tried to add opacity. First, I set the opacity of aboutBody to 0, then added opacity 1 in ScrollTrigger. But it doesn't work as usual. Ok, I am gonna read the article about `.from()` first. Thanks. .aboutBody { padding-top: 100px; opacity: 0; } const aboutBodyTimeline = gsap.timeline({ scrollTrigger: { trigger: ".aboutBody", // Start of the start: "top center", // Start animation when the top of .aboutBody hits top of viewport // scrub: 1, // 1 second delay between scroll and animation markers: true, // show markes, easier for debugging }, opacity: 1 });

Hi mvaneijgen, Thank you so much. I'm just starting to learn GSAP and haven't figured out how to use the timeline. So, that's helped a lot. However, I got one more question. I am trying to add a scale-up to the right first, and after the scale-up-right animation shows the text with a scale-down-right. But, before users scroll to the text, they cannot see any text on the screen. Can I add one more scaleX: 100 to aboutBodyTimeline to make it scale up to the right first? Or I need to create another box with scaleX 100 before this one? Thanks again. aboutBodyTimeline.to(".box", { scaleX: 0, // scale the boxes to a width of 0 transformOrigin: "center right", // scale down to the right // stagger: 0.3 // small delay between each .box });

I am trying to add a Text Reveal animation. But, the height of each text is different. So, I have to use multiple divs for them. I tried to add CSS active to each div's animation. However, GSAP seems can only add one active to the first class. Not all the classes are with the same name. How can I make it scroll to the first line of the text and trigger all the animation for different lines of text simultaneously? Thanks.