[Add delay between elements in animation]

On 1/5/2021 at 3:19 AM, GreenSock said:

Sure, that's easy:

ScrollTrigger.batch(revealContainers, {
  onEnter: elements => elements.forEach((e, i) => e.animation.delay(i * 0.2).restart(true)),
  once: true
});

 

 

 

Is that what you want? 

How to implemented this script to text reveal?

[How to add stagger on image reveal with scroll triger]

How to adding stagger in this script,  the stagger still not working

 

See the Pen pogQKwR by cameronknight (@cameronknight) on CodePen

[How to use polygon to animating image?]

How to use polygon in gsap code to animating image with this code:

 

 

So, image will animating from bottom, like this:

 

See the Pen WNwZORV by cameronknight (@cameronknight) on CodePen

 

Thanks 

 

See the Pen wvOZMvQ by byhndo (@byhndo) on CodePen

[How to create button water effect(displacement map) with newer gsap version]

1 hour ago, Rodrigo said:

Hi,

 

This is a fork of Blake's codepen using GSAP 3 syntax, nothing extremely complex:

 

 

 

Is worth noticing that the codrops demo (not always the easiest things to re-created might I add) is using masking for the specific effect. I'd suggest you to check this thread by @mvaneijgen on the subject:

 

Hopefully this helps.

 

Wow thank you, I've gotten the points. And it went well. Thank you.

[How to create button water effect(displacement map) with newer gsap version]

3 minutes ago, ryan_labar said:

Please avoid @-ing specific moderators, as it's rather impolite. I'm not seeing a button on your website's example, and your CodePen still isn't properly linking the the distortion image, but I'm assuming you're looking to improve the distortion effect on the '0' in '404', is that correct?

It would be easier for us to help debug this if you updated your CodePen with the actual effect you're looking for—my guess is that the differences you're seeing in the effect are due to timing, scale, and that your image has a solid fill rather than an outline, but without a codepen properly showing this it's rather difficult to debug.

That's right, I want to apply the effect to the red "0" on my 404 page. The effect is working but not working properly. Because I want to use the code from gsap 1.19 to gsap 3.12.5 version.

 

In this section (gsap 1.19 version):

bt.addEventListener('click', function(e) {

    TweenLite.set(turb, { attr: { x: isFF ? e.offsetX : e.offsetX + 10, y: isFF ? e.offsetY : e.offsetY + 10, width: 0, height: 0 } });

    TweenLite.to(turb, 3, { attr: { x: '-=300', y: '-=300', width: 600, height: 600 } });

    TweenLite.fromTo(dm, 2, { attr: { scale: 30 } }, { attr: { scale: 0 } });

  });

}

 

To gsap version 3.12.5:

 

bt.addEventListener('click', function(e) {

    gsap.set(turb, { attr: { x: isFF ? e.offsetX : e.offsetX + 10, y: isFF ? e.offsetY : e.offsetY + 10, width: 0, height: 0 } });

    gsap.to(turb, 3, { attr: { x: '-=300', y: '-=300', width: 600, height: 600 } });

    gsap.fromTo(dm, 2, { attr: { scale: 30 } }, { attr: { scale: 0 } });

  });

}

[How to create button water effect(displacement map) with newer gsap version]

25 minutes ago, ryan_labar said:

Are you able to link this image to your SVG in your CodePen? xlink:href="img/ripple.png" is 404ing.

Yes, I solved that problem by saving the png on my host and it worked. 

But the problem is not that, I want the effect to work properly like on this page 

https://tympanus.net/Development/DistortedButtonEffects/

 

 

And I tried to apply it with gsap version 3.12.5 but it doesn't work well on my web page https://bayu.monster/404

 

Hello can you help @OSUblake

[How to create button water effect(displacement map) with newer gsap version]

How to create water effect on button with gsap version 3x..

 

Button number 8 in this :

https://tympanus.net/Development/DistortedButtonEffects/

 

I've tried implementing it on my web but the effect on the button doesn't work well.

 

https://bayu.monster/404

 

 

Here is the code:

 

 

I hope someone can help me Thank you

See the Pen ExMRNpR by byhndo (@byhndo) on CodePen

[Easy Pack]

Why EasyPack plugin dissapear in new version plugin? Please give information about documentation about using easypack ini new version?

[How to combine windows load to gsap setup reveal]

How to insert/combine window load(loading until all page loaded) to function "setup reveal" in gsap. So, the page load all resource before star animation. Like this:

 

window.addEventListener("load", () => {

  const tl = gsap.timeline();

  tl.to(".loader", {

    delay: 2,

    opacity: 0,

    duration: 1,

    ease: Power3.easeOut

  });

 

function setupReveal(container) {

  container.ctx = gsap.context(() => {

 

//gsap code...

 

});

}

 

Like this but combine windowload with function setup reveal, ctx context :

See the Pen oNmjaWb by byhndo (@byhndo) on CodePen

[How do I implement the loading effect into the "Setup Reveal" on this page?]

How to apply the loading effect on the page below? It is difficult to apply to the "SetupReveal" function

 

This effect loading before animating  into this page

See the Pen GRBeodX by GreenSock (@GreenSock) on CodePen

 

Thanks before l.  I was frustrated. I've tried many times but it's not working. 🥲

 

I thank you very much because this forum has helped me a lot for a long time.

See the Pen YzBzXog by GreenSock (@GreenSock) on CodePen

[Why does the animation move first before windows finishes loading?]

Why does the animation move first before windows finishes loading?

See the Pen VwgwZqV by byhndo (@byhndo) on CodePen