GSAP Carousel - detecting tweening and performing action

[Pete K 6 Likes (Newbie)]

Hi, 

Here is the scenario for a gsap carousel . I create a timeline for each of the elements ( a slide showing up, sticking around for 2 sec, and sliding out ). Then I stich them together under a mastertimeline and I make a scrolltrigger which starts the slideshow on entering.  All works fine so far...

Upon leaving I want the mastertimeline to be paused. However pausing the timeline at the moment of transition or when a slideshow's autoAlpha ==0 looks bad, so I made a condition in which I am trying to detect tweening and if the tweening is on I do a delayedCall , if it is off, I want to pause the timeline instantly... 

As you can see in the demo - the last part of pausing the carousel is not working fully as expected.

As always - woudl be greatful for help !!!

Best, P.

 

 

 

 

See the Pen QWqBmbO?editors=1111 by janek_marcepan (@janek_marcepan) on CodePen

[OSUblake 18,475 Likes (Superhero)]

Hi Pete, 

 

I don't know what you mean by not working as it not obvious to me what you are expecting.

3 hours ago, Pete K said:

As you can see in the demo - the last part of pausing the carousel is not working fully as expected.

 

I did notice that your pen has some errors in it, like masterTimelineCarousel might be undefined, so you should define that before your ScrollTrigger.

 

Also, your delayedCall is incorrect.

gsap.delayedCall(.5, () => masterTimelineCarousel.pause() )