Jump to content
Search Community

Tween eventCallback on timeline reverse

ALTIMAX test
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

Hi all,

 

I have a simple timeline (here just a little part) with some tweens, one of them have an onComplete callback.

 

mobileTimeline = gsap.timeline({paused: true})
  .to(pictures, {opacity: 0, duration: 0.5, onComplete: switchPic})
  .to(pictures, {opacity: 1, duration: 0.5}, ">");

function switchPic(){
  let picA = pictureA.find('.HomeIntro-img').attr('src');
  let picB = pictureB.find('.HomeIntro-img').attr('src');
  pictureA.find('.HomeIntro-img').attr('src', picB);
  pictureB.find('.HomeIntro-img').attr('src', picA);
}

Everythings runs well when i trigger mobileTimeline.play(), but i want to trigger the event callback on mobileTimeline.reverse() too. 

I have tried the onReverseComplete callback on the tween but it didn't triggered..

 

Someone can explain me how to proceed ?

 

Thanks !

Link to comment
Share on other sites

  • Solution

Hey ALTIMAX and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Business Green membership! 

 

To have a function run when you play a timeline runs forwards and reverses it'd probably be best to use a .call(). I'd rewrite your timeline like so:

mobileTimeline = gsap.timeline({paused: true})
  .to(pictures, {opacity: 0}) // 0.5 is default duration - not needed
  .call(switchPic)
  .to(pictures, {opacity: 1}) // tweens are automatically sequenced - position parameter not needed

See the Pen ZEpyyGG?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Side note: Switching out SRCs isn't the best because the new image has to take time to load. It might be better to have multiple img elements and switch them out inside of your function call.

  • Like 2
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...