GSAP Timeline Entrance and Exit with Bootstrap Carousel

[Skilltech]

Hi,

 

I couldn't find a clean example of GSAP 3 timeline animation with Bootstrap Carousel, applied on slide elements (such as heading, description and button), i.e. the mentioned elements having entrance animations when their parent slide becomes active, and exit animations when the transition to next slide starts.

 

So, I made a sample code pen with the most basic Bootstrap carousel where you, the Superhero, could demonstrate a simple entrance/exit timeline animations for the active slide.

 

For info, I've written down the 3 basic Bootstrap rules that run the carousel and the two main events you can connect the timelines to.

 

I've also fully commented the following:

Bootstrap carousel basics (mentioned above)

HTML Setup
Events to connect to (mentioned above)

Purpose of the pen

Animation details

 

I hope you can demonstrate the best way to do these animations as it will be invaluable to a lot of us gsapiens.

See the Pen oNovgxL by MrGordonFreeman (@MrGordonFreeman) on CodePen

[_Greg _]

Hi!

 

What did you try?

I think maybe this can help you 

See the Pen XWzrMGX?editors=0010 by gregOnCodePen (@gregOnCodePen) on CodePen

I didn't find init event on bootstrap carousel so you need something like DOMContentLoaded or window load

I don't know why did gsap.delayedCall is not working on my answer so i use setTimeout

 

UPD:
I see some issue with last slide (on repeat). I think better use something like swiperjs with normal API or creat your own slider. I can't find onloop, init, beforeinit, afterinit, beforechange, afterchange Events on bootstrap carousel

[Skilltech]

Hi @_Greg _,

Thanks, I checked your pen but unfortunately it's not behaving as intended. In the JS tab I described the purpose of the pen and the animation details. So it's important that it's a timeline and that it has one setup (timeline) for the slide entrance and another when transition to another slide starts. As for the carousel init, carousel can actually be initialized via JS (as opposed to data attribute) so I'll update my pen to remove that data attribute and init via JS (I'll leave a comment).

[_Greg _]

30 minutes ago, Skilltech said:

As for the carousel init, carousel can actually be initialized via JS

I talk about event, not init. You can init carousel but didn't get callback does it init or not. 

 

In my example you have 2 animations - after start (slide.bs.carousel event) and before end (function animationOut) you can place different animations there. I think,  I don't quite understand you.

 

If you want listener for class was changed, you can use something like MutationObserver with property attributes: true

 

With bootstrap carousel you have only 2 event callbacks slide.bs.carousel and slid.bs.carousel