[Cycling through SVG stop-colors]

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

[Cycling through SVG stop-colors]

Regarding this line

 "offset": function(index, target) {

 

Why passing "index" to the function?

[Animated linearGradient in GSAP]

Yes, your help is greatly appreciated. 😀

[Animated linearGradient in GSAP]

I tried to change the svg gradient with GSAP 3 but not success

See the Pen mdKOXKj by fredericklim (@fredericklim) on CodePen

 

I want to convert this CodePen to v3

See the Pen rxRGjg by jonathan (@jonathan) on CodePen

 

[Animated linearGradient in GSAP]

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

[Unset all animation]

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. 

[Unset all animation]

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

 

[Unset all animation]

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

See the Pen GRyYjdN by fredericklim (@fredericklim) on CodePen

[Is it possible to randomize stagger?]

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

[How to disable ScrollTrigger auto play when an element is visible after page load]

3 hours ago, OSUblake said:

Hi flim, 

 

Check out the new .isInViewport() method.

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.isInViewport()

 

So if it's in the viewport, just set the animation's progress to 1.

if (ScrollTrigger.isInViewport(myElement)) {
  myAnimation.progress(1);
}

 

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.

 

See the Pen NWvewXE by fredericklim (@fredericklim) on CodePen

 

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?

 

[How to disable ScrollTrigger auto play when an element is visible after page load]

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".

See the Pen abyRXVb by fredericklim (@fredericklim) on CodePen

[Not animate with gsap.from]

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?

See the Pen WNEgwLB by fredericklim (@fredericklim) on CodePen

[Uncertain linear gradient + png background setup]

Thanks for the advise.

 

I can get the gradient fading result with SVG. Here is the setup.

 

See the Pen Badxezb by fredericklim (@fredericklim) on CodePen

[Uncertain linear gradient + png background setup]

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.

See the Pen zYdjGXj by fredericklim (@fredericklim) on CodePen

[Question about Javascript]

Many thanks for the links, very useful.

[Question about Javascript]

Thanks for the docs link. But I not quit understand why need to include window, because if I remove window then the code will not work. In other examples there is no window before gsap.registerPlugin.

 

const registerPlugin = gsap.registerPlugin;

 

Also I cannot get the meaning of "..." in the line "...document.querySelectorAll(".apple-image--complete")"

const COMPLETES = [
  ...document.querySelectorAll(".apple-image--complete"),
  document.querySelector(".apple-image--complete"),
];

 

[Question about Javascript]

Thanks for explaining that, those modern JS syntaxes are really like puzzle.

 

But I don't understand why add window before the gsap.timeline etc.?

[Question about Javascript]

In that CodePen, I cannot understand these few lines of code

 

const {
  gsap: { timeline, set, registerPlugin },
  ScrollTrigger,
} = window

What is the purpose of assign window to gsap, ScrollTrigger?

See the Pen KKVMmdz by jh3y (@jh3y) on CodePen

[Scroll to control video position]

Thanks for the detailed advice +1

[Scroll to control video position]

I saw some websites with smooth scroll video position control like Apple and Samsung, I tried to control the video but the result is very choppy, tried different size of video but the result is not desire. Any suggestion?

See the Pen XWaRBZY by fredericklim (@fredericklim) on CodePen

[How to setup two tween for the same element?]

I got desire result after added immediateRender: false in the 2nd tween. Thank you.

[How to setup two tween for the same element?]

I want to setup two tween for the same element, in the codepen, the h1 set as gsap.from, the text fade in and move from right, then in next tween gsap.to I want the text scale up and fade out.

 

The first tween seems work, but no effect in the second tween. Any idea? Thank you.

See the Pen GRvqLmL by fredlim (@fredlim) on CodePen

[Question about ScrollTrigger.refresh()]

I want to set the scroller-start position calculated by the height of header.

See the Pen gOxrmKP by fredlim (@fredlim) on CodePen

 

I am newbie in JS and GSAP, many thanks for your help

 

 

[How to make scrub work in ScrollTrigger.create() instance?]

I see, just learned the animation property from your codepen. Thanks!

[Question about ScrollTrigger.refresh()]

Is that ScrollTrigger.refresh() only effect on ScrollTrigger.create() instances? But not on scrollTrigger inside gasp.to?