Jump to content
GreenSock

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

How to make delay prop work every yime

Recommended Posts

Hi,

I wander how can I make the delay prop work every time I call .play() method.

 

I also tried to chain the .delay(s) method like tween.delay(1).play() but it did't work. ☹️

 

Someone more experienced can help me pls?

 

Thanks

See the Pen mdyZxew?editors=0010 by giuliocollesei (@giuliocollesei) on CodePen

Share this post


Link to post
Share on other sites

Hi Sketchin,

 

you could use i.e. timeline for this. Would it be a solution for you ?  The last parameter inserts the tween at 1 which will be respected every time you restart the timeline.

 

var toggle = document.getElementById('toggle')
toggle.addEventListener('click', toggleHandler, false)

var tl = gsap.timeline({paused:true});
tl.fromTo('#square', 1, {
  x: 0,}, {
  x: 500
},1);
var state = true;

function toggleHandler() {
  if (state) {
    tl.play()
  } else {
    tl.reverse()
  }
  // Update state
  state = !state
}

 

  • Like 4

Share this post


Link to post
Share on other sites

Hey @themepunch that's a clever solution! Good to see you helping out.

 

Another approach is to use restart(true). The true means delays will be honored: https://greensock.com/docs/v3/GSAP/Tween/restart()

 

function toggleHandler() {
  if (state) {
    tween.restart(true)
  } else {
    tween.reverse()
  }
  // Update state
  state = !state
}

 

  • Like 3

Share this post


Link to post
Share on other sites

All these suggestions are very helpful. Thank you guys! 😉👍

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×