flim

Why I need to pass a dummy parameter to the function 1st parameter? Is that JS requirement?

Regarding this line "offset": function(index, target) { Why passing "index" to the function?

Yes, your help is greatly appreciated. ?

I tried to change the svg gradient with GSAP 3 but not success https://codepen.io/fredericklim/pen/mdKOXKj I want to convert this CodePen to v3 https://codepen.io/jonathan/pen/rxRGjg

I am trying to convert the syntax for GSAP v3 but hard to start as I don't know v2 syntax. Anyone could help?

I want to reset the animation to the beginning of the animation when switching from desktop to mobile screen, not revert playback. Now I just check mediaquery to reload the page without animation when switching to mobile, or set animation when change to the desktop view.

I update my CodePen, gsap.globalTimeline.clear() seem not work as desired, gsap.globalTimeline.timeScale(999) works great. Many thanks!

Is it possible to unset all animation, I want to check if media query change, no animation for all elements.

Is there a randomize stagger available or I have to write my function if I want the elements to animate in random order?

Hi OSUblake, Thanks for the advice, I shall read the doc more carefully. Here is my trial, if I change the zoom to 0.25x, the element 'b' will be at the end position, change the zoom to 1x the normal scroll animation resume. ScrollTrigger - reset & replay 2 (codepen.io) It is not perfect, the animation position will jump to the end if I resize the viewport which is large enough to make the element in the viewport. Any advice?

I want the element to show in the animation "end" position when it is already on the screen, i.e. after page loaded. For instance, in the codepen, change the zoom to "0.25x", "b" will be visible, "b" will start to play just if I run the codepen again. How to make "b" start in the animation end position if it is visible already? Like when "b" is visible after page loaded, the tween duration is "0".

In this codepen, the #box1 didn't animate, but #box2 works, any idea? And what is the setup if the div .animate is on the top the page, the animation play after the page load, and also play when the page down and the move up to the top?

Thanks for the advise. I can get the gradient fading result with SVG. Here is the setup. https://codepen.io/fredericklim/pen/Badxezb

I tried to add an animation for the gradient, not sure the setup is the right way or not, the png background will flash one time while playing the gradient animation.

Many thanks for the links, very useful.