Jump to content
Search Community

Alternative for ["{self}"] parameter with DrawSVG in gsap 3

uarreghini test
Moderator Tag

Go to solution Solved by Carl,

Recommended Posts

In gsap 2 I had a  timeline to first draw the stroke of each letter of a svg text and then fill it with a color after the stroke is complete but now in gsap 3 I can't figure how to pass the correct argument to the fillLetter function. 

 

tl.staggerFromTo($('#layer1 path'), 0.5, {'drawSVG': "0%", 'visibility': "visible"}, {'drawSVG': "100%", 'onUpdate': fillLetter, 'onUpdateParams': ["{self}"], 'ease': Linear.easeInOut}, 0.20);

 

function fillLetter(istance) {
    setTimeout(function () {
        istance.target.style.fill = "#0d47a1";
    }, 200);
}

Link to comment
Share on other sites

Hi @uarreghini

 

if you want to use stagers with callbacks in GSAP 3 you should use the stagger object as shown below

 

See the Pen BaWNbwa?editors=1111 by snorkltv (@snorkltv) on CodePen

 

Here's a video from GSAP 3 Beyond the Basics showing how it can be configured for repeats. 

 

 

Using the stagger object for callbacks for each target is similar as shown in my demo above. If you need more help understanding callbacks and scope in GSAP 3 this video should also help

 

 

If you need more help please provide a minimal demo.

 

 

 

  • Like 4
Link to comment
Share on other sites

Please look at this example:

See the Pen YzZyKwZ by arreumb (@arreumb) on CodePen

, what I try to achieve is:  draw the outline of the first letter and then fill it with a color before starting to draw the outline of the second letter and repeat this for all the letters. Using  stagger: {each:1, onComplete: onComplete} is extremely slow so I was searching a way  to pass to an external function the svg path to fill. I could do that in gsap 2 using  ["{self}"] but now it seems I only have an array with all the paths but no information on what is the current path to fill. 

Link to comment
Share on other sites

55 minutes ago, uarreghini said:

I could do that in gsap 2 using  ["{self}"]

 

For the record, that was kind of pointless as this is the instance inside the callback, so it was removed.

 

function fillLetter() {
  this.targets()[0].style.fill = "#0d47a1";
  console.log("INSTANCE", this); // tween instance
}

 

But I would just follow @Carl's advice. 

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...