Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
pils

play function in timeline for x seconds

Recommended Posts

Hi, i have found a function that creates a random shake effect. The effect is now endless but i want to use this function in my timeline for a x amount of seconds. See codepen for the shake effect, below is kinda how i want it to work.

 

function Tween(){
  var T = TweenLite.to(".circle",0.02,{x:R(-10,10),y:R(-10,10),scale:R(1.1,0.9),rotation:R(-10,10),ease:Sine.easeInOut,onComplete:Tween})
};

function R(max,min){
  return Math.random()*(max-min)+min
};

var tl = new TimelineLite();

tl.add(Tween)
  .to('.circle', 1, {scale:50, y: -30}, "start+=0.5")
  .from('.circle-2', 0.3, {opacity: 0.0, scale:10}, "start+=0.6")
  .to('.circle-2', 0.6, {x:100, ease: Elastic.easeOut}, "start+=1.25")
  .from('.blokker', 0.6, {opacity: 0.0, x:15, ease: Elastic.easeOut}, "start+=1.4");

 

So this adds the shake effect to my .circle class but obviously this keep going and going. Just like the rest of my timeline i want this effect to last for a x time and then move on with playing the rest of the timeline.

See the Pen rzJMvO by luffyy (@luffyy) on CodePen

Link to comment
Share on other sites

The solution here is to create a function that creates a random shake timelime that you can place in your main timeline.

This seems very similar to Mikel's situation where he needed different sequences of random lip movement.

 

Please see my post and demo here to see how the random animations were nested into a parent timeline:

 

  • Like 3
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.
×