[Help needed with drawSVG plugin (want to achieve Handwritten effect)]

Hi guys, 
Could you please help me with drawSVG plugin?

Want to achieve Handwritten effect, I have the codepen with just this js:

gsap.registerPlugin(DrawSVGPlugin) 
gsap.from(".draw-me", {duration:10,drawSVG: 0});

But I don't see the animation at all

See the Pen KKExMpN?editors=1010 by anastasiya33 (@anastasiya33) on CodePen

[Animation flickering using fromTo (opacity / transform)]

Hello,

I suggest trying this code (I added css and replaced opacity with autoAlpha)

[How to reveal image on hover and fade out to top on mouseleave]

Hey Ivan,

I have forked your demo and changed a little bit. Please, check it.

 

See the Pen BaxNqxN?editors=0010 by anastasiya33 (@anastasiya33) on CodePen

[Can't change progress() after it is == 1]

The idea is to create a class, which can be used by many creative developers in order to test their work. So it`s not me who will be creating timelines with animations.

 

So if a person has more than 1 timeline, (the idea was) this person do not need to pass all of the timelines to my class, but there will be globalTimeline, who will 'collect' all of them at once.

[Can't change progress() after it is == 1]

As you can see in codepen demo, if user of the class do not pass a timeline, I made a default timeline as gsap.globalTimeline. The main idea of this is to 'unite' of the timelines (if there are a few ones) and control all of them at once.

[Can't change progress() after it is == 1]

I see, thank you!

 

Let me just explain my intentions. I am working on a tool - Controller, that will help creative developers to test their work with animation. I am developing a class, to which people can pass their timeline, but what if developer uses multiple timelines in one creative? In this case I added globalTimeline. So just to sum up, if a developer has 1 timeline, this timeline is passed to a class, but if there are multiple ones, there is no need to pass any, because the default timeline is globalTimeline.

 

Could you please suggest how to work with such kind of situations?

[Can't change progress() after it is == 1]

I found reason. 

 

It works perfectly with regular timeline. But what if I would like to use globalTimeline? When I change to globalTimeline it's not working - can't change progress() after it is == 1.

[Can't change progress() after it is == 1]

Hello everyone,

 

I have a problem with (I believe so) progress().

I have timeline and I am making controls for interaction with it. Among controls I have input type range. I would to make it possible to control timeline with this input (range).

 

So I have this code:

 

    updateRange = (timeline) => {

        timeline.eventCallback("onUpdate", function () {

            let range = document.getElementById('range');

            range.value = timeline.progress();



            range.addEventListener("input", function () { handleUserInteraction() });

            function handleUserInteraction() {

                    timeline.pause();

                    timeline.progress(range.value);

            }

        });

    }

 

While timeline is running from 0 to 1 (progress), this code works perfectly. But after progress of the timeline is 1, I can’t control the timeline.

 

If you have thoughts, please let me know.

 

 

 

UPDATE

I found reason. You could find code below.

It works perfectly with regular timeline. But what if I would like to use globalTimeline? When I change to globalTimeline it's not working - can't change progress() after it is == 1.