[wiggle / vibrate effect using gsap.utils.random]

Hi geedix 

Thanks for reply.

Confirming that repeatRefresh: true parameter does work ! Thanks !.

 

 

 

 Can add an interesting case about it. I remember trying this parameter before, but didn't work back than. 

 

Turns out that this works: 

.to(txt1, { duration: 0.2,  x: gsap.utils.random(-30, 30, true),  y: gsap.utils.random(-30, 30, true), ease: "rough"});

 

But a relative position does not. (no new randoms values upon repeat even with refresh parameter)

.to(txt1, { duration: 0.2,  x: "+="+gsap.utils.random(-30, 30, true)(), y: "+="+gsap.utils.random(-30, 30, true)(), ease: "rough"});

 

Could this be a bug?.

[wiggle / vibrate effect using gsap.utils.random]

Hi

 

I was wondering if i could create an infinite wiggle effect using gasp.utils.random, but the problem is that upon repeat the random durection dosnt refresh.

I gues it worked only on load. Is there any chance we can force it to generate new direction upon timelne repeat or using parameter repeat:-1 ?

 

 

    .to(myTextField, {duration: .2, x: "+="+gsap.utils.random(-30, 30, true)(), y: "+="+gsap.utils.random(-30, 30, true)(), repeat:1, yoyo:true, ease: "rough"})

[pre-end label in gsap timeline repeat]

Guys, those are some great examples !

I had no idea we can use tl.tweenFromTo from 0 to a specific label 🤯 will definitely experiment with that ! (now I wonder what else I dont know with gsap 🤔 - is there any hidden array that stores all objects that appeared on specific label perhaps ? So we could do .to(LABEL, .5, {alpha:0})  )

 

Adding separate function also seams clever and universal.
Thanks for hints! Will hit back if i scramble some code i like best ❤️

[pre-end label in gsap timeline repeat]

Hi there.

Im searching the forum to find the most elegant way to repeat a timeline, but with a nice fading effect on last repeat.
Im aware we can define repeat parameters on timeline object, and i like that idea.
tl = gsap.timeline({repeat:3, repeatDelay:2});
 

But this will also repeat the last label of timeline, witch typically is a fade out effect, so the animation can start again from a blank state.
example:
.add("cleanRepeatFrame","+=2")
.to([txt1,txt2,txt3logos,cta ... etc], .5, {alpha:0}, "cleanRepeatFrame")

 

 So far i've been doing workarounds like trying to stop timeline before we reach last label in last repeat loop. But this seems not clever at all.

example of my workaround:

.add(function() { r++; if (r>3) { tl.pause();    }}, "+=0")

.add("cleanRepeatFrame","+=2")

 

So im just adding a function before cleanRepeatFrame, that checks loop number (r variable is just assuming we started from 0, and i need to manualy adjust it on how many loops the timeline got. (sub question - any way to get the loop number from timeline object ?)

 

So general question would be, is there any better / cleaner way to code such functionality.
Would adding onRepeat: to timeline object be a nicer approach ?

 

Best regards.

 

[steppedEase helper]

Omg. Works like a charm. Thank You very much ^ o^

[steppedEase helper]

4 minutes ago, GreenSock said:

do you want a callback triggered every time the next letter starts animating? 

Yes, exactly that ! Im sorry for bad explaining. I just need to know, when to fire next arrow animation (so when staggerFrom decides its the next object to animate)

- Im aware of gsap 3.0, but in this project i need to stay with the old one, as others collages are working in that too.

- Will learn to use codePen, promise !

[steppedEase helper]

@GreenSock

While il continue to try the @ZachSaucier Idea.  Here the demo for You.

I stripped all unnecessary code and custom templates. You ware right i implemented it in the wrong way. Now the console does trigger a string, but still more times than it needs to (for every letter, triggers 16 times)

 

Best regards.

demo_forum.zip

[steppedEase helper]

A multiple timelines nested in a master timeline, approach could work!

Nice idea, will try that tomorrow. Thanks!

[steppedEase helper]

Hi All. Thank You for all Your responses.

 

@ZachSaucier @PointC
Unfortunately i cant provide a proper codepen, due to all this code being in animate cc. However i did record a small demo gif, demonstrating more or less, what im trying to achieve.

 

I do believe the stagger and steppedEase is the key. I will try to explain this demo.

 

General purpose of this script is to automate an animation like in the gif.

Im putting all the letters into an array using a for() loop, so from this point i can conveniently use a single like with gsap:

TweenMax.staggerFrom(textArray, .5, {y:"+=10", alpha:0, ease:SteppedEase.config(16), 1);

 

The next step would be to fire the arrow tween animation, at the .x coordinate of a corresponding letter. (i all ready got all the .x positions of each letter stored in a separate Array thanks to the initial for loop).

So, in my mind, the tween, for the Arrow, would need to look more or less like that:

.set(arrow,{x:positionXArray[currentLetter]})
.from(arrow,.5,{y:"-="+30,alpha:0, ease: Power2.easeOut}, 1 , 
  onComplete:function() {
        // tween for arrow disapearing goes here
      }
    });
currentLetter++

 However i would need to know, when to fire the function above. It should fire when a letter appears and only a total of letter numbers times.

The onUpdate callback, tigers much more times than a numbers of letters (even with a SteppedEase), making this approach invalid.

 

@GreenSock

This function looks very promising. But when i tested it,  the function myCallback() didn't trigger at all, and console was not showing any "changed!" string.

function myCallback() {
  console.log("changed!");
}

 

Best regards.

[steppedEase helper]

Hi

 

Is there a way to create stepping ease helper to update the positions of object to the corresponding array values, a defined number of times ?

 

what i tried so far:

    TweenMax.staggerFrom(textArray, .5, {y:"+=10", alpha:0, ease:SteppedEase.config(16),
        onUpdate:function(){ 
            //console.log("updated"); // updates many time, not good. I would like to triger some code, only when letter apreas. So this needs to fire only 16 times total
        }
    },.5) 

 

i also tried stepping ease with a variable version

var ticker = {value:0}

    TweenMax.to(ticker, 1, {value:16, ease:SteppedEase.config(16), 
      onUpdate:function() {
        console.log("updated"); // unfortunatly this update trigers more times than 16
      }
    });

Best regards.

[Morph svg on canvas in animate cc]

Thank You for the reply.

 

Will try to do that. Seeing You sugested the draw by function, im asuming this will not work by simpy drawning a shape from animate interface and pas that as a variable to draw function, corect ?

[Morph svg on canvas in animate cc]

Hi

 

Ive just soaw new release of gsap, and update to morph svg to render mode to draw on canvas. This is wonderfull. Does that mean we can now morph shapes in animate cc as well ?

 

Best regards.