Trapti

Hi, You can refer this pen. https://codepen.io/GreenSock/pen/BaQXjWw

It was not ending at the top. It was going back to its original position where it had been placed. I added some content above this text to change the position of this text on the page and the start trigger. You can check the pen.

Hi, I think the problem is not clear. Final SVG is a path which has many points which point you want to move on cursor? Changing the point on a cursor move is easy. All you have to do is convert SVG path to Template literals and change the particular coordinate with cursor's coordinate in JS. If the shape needs to modify, then use morph plugin gsap. Here it is not clear the behaviour you are trying to achieve. This is the pen I did for line drawing SVG on the cursor move. https://codepen.io/tripti1410/pen/VwLZEZB?editors=1010

Hi, If I understood the problem right then this is the problem. In the given code: - In CSS the visibility is set to hidden to the main class. But in Js its never set to visible. - From tween been used from Autoalpha 0 which is making them hidden initially. And this has been applied to the individual chars not to the parent. These two things were messing. Solution: - In CSS add "visibility" and "opacity" to "hidden" and "0" to the ".txtMain" and ".txtMain2". - Using GSAP ".set" make it visible using "autoalpha" to the ".txtMain" and ".txtMain2". Here is the code. https://codepen.io/tripti1410/pen/eYbgpEd Hope it helped!

@Vineeth Achari I have updated my pen.

Text from left to right. https://codepen.io/tripti1410/pen/rNoWByN?editors=1010

Hi, You can refer to the below pen. Attach a scroll trigger to the timeline for making this effect to run on the scroll. - If you want text (faded) to be visible always. Experiment with opacity, currently it is 0. https://codepen.io/tripti1410/pen/OJZbObE?editors=1010

Hi, Here is pen I created some time back for the same effect. This might not be the perfect one, but you will get some idea. https://codepen.io/tripti1410/pen/QWJvxRE

Hi, Wrap panels in a div. Below is the example. I hope I understood the problem right. https://codepen.io/tripti1410/pen/YzdWazd?editors=1010

Hi, one approach could be: Create one SVG which is coving the entire page. This SVG will contain the ball (small size) and the text which needs to be shown on hover. The page will be in sections showing different texts. 1. The SVG is covering the entire page hence the ball (small size) which you can attach to the cursor will be shown in the entire page. 2. As soon as the cursor reaches the first section which you can determine using the position coordinate. Increase the ball size and show the respective text. Same for the other sections.

Since you are using .from tween. You can set initial scale of the SVG to be 3 using `gsap.set("svg", {scale: 3})`. So initially it will be 3 and then from tween will go 0.1-3.

Increase the scaling, as of now it is going from o.1 to 1. Make it bigger like 2-3?. To play for long adjust the end value of trigger accordingly.

Hi, if you can describe more on what you are trying to achieve and what have you tried so far. A minimal demo on CodePen will be great. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: Here is bunch of scrollTrigger demos: https://greensock.com/st-demos/

Here is a pen of similar looking effect using splittext. https://codepen.io/tripti1410/pen/abjVKZP?editors=0110

Hi, In order to trigger animation 'scroller-start'(scrollbar's position) should meet 'start'(trigger element's start position). Change the start value to 'start: 'top+=100% bottom' and the animation will run.

Hi, Panel animations. you can find more demos here https://greensock.com/st-demos/ https://codepen.io/GreenSock/pen/KKpLdWW

Hi, Because structurally it is inside the first panel. Keep it outside of panels. https://codepen.io/tripti1410/pen/rNrjrRb

Tailwind's 'hidden' class sets the 'display: none' property. GSAP 'autoAlpha' sets 'visibility' and 'opacity' property. Basically you are dealing with two diff properties so how will they override.

Hi, Welcome to the forum! This is CodePen by @Carl. I hope this is helpful. https://codepen.io/snorkltv/pen/abddMGd

tl.fromTo( ".main-wrapper", { blur: 20, }, { blur: 0, duration: 5, ease: "bounce.in" } ) .fromTo( ".main-wrapper", { opacity: 0 }, { opacity: 1, duration: 5, ease: "linear" }, "<" ); One way is to create a different tween for that.

Hi, In the Codepen the animation is working fine. That is how I want it to be. Problem is Orange color box which is moving on scroll and reaching to the green color section is not visible on the blue color section. I am animating the orange box using Flip plugin. It is not a z-index issue.

if you remove ".align-cc" class flickering will not be there.

To me it looks fine you don't have to use "align-cc" class its already at center. The way text looks before the animation it is same after the animation. Text left align container center to the viewport. Or Am I missing someting?

Hi, No you don't need multiple scrollTrigger. In this pen I dded a timeline and added another tween for drawing. Just make the path reverse and it will be fine. Blog explains reversing: https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/ https://codepen.io/tripti1410/pen/NWzXgdb?editors=1010 you can checkout this ex as well: https://codepen.io/tripti1410/pen/GRyBxeZ

Hi, You are using some other library to control scroll animation. It will be difficult for us to help with that. I suggest - Convert the animation code to use GSAP 3 new version you are currently using TweenMax. - To trigger this animation on scroll use scrollTrigger. And if you face issues will be able to help.