Skilltech Posted January 23, 2022 Share Posted January 23, 2022 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 Link to comment Share on other sites More sharing options...
_Greg _ Posted January 24, 2022 Share Posted January 24, 2022 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 2 Link to comment Share on other sites More sharing options...
Skilltech Posted January 24, 2022 Author Share Posted January 24, 2022 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). Link to comment Share on other sites More sharing options...
_Greg _ Posted January 24, 2022 Share Posted January 24, 2022 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 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now