What I'm trying here is when I toggle the Bootstrap button then reverse animation should go faster already google about timeScale(3); but How can I add timeScale only for reverse animation on toggle script. You can check Example
gsap.set("#sidebar-nav a", { opacity: 0, y: 100 }); var nv = gsap.timeline({ paused: true }) .to("#sidebar-nav a:nth-child(1)", { duration: 0.2, delay: 0.3, opacity: 1, y: 0 }) .to("#sidebar-nav a:nth-child(2)", { duration: 0.2, opacity: 1, y: 0 }) .to("#sidebar-nav a:nth-child(3)", { duration: 0.2, opacity: 1, y: 0 }) .reverse(); var buttOn = document.querySelector(".toggle-btn"); buttOn.addEventListener("click", function() { nv.reversed(!nv.reversed()); });@import url("[email protected]/font/bootstrap-icons.css"); #sidebar-nav { width: 160px; }<link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="[email protected]/dist/js/bootstrap.bundle.min.js"></script> <script src=""></script> <div> <div> <div> <div> <div> <a href="#"><i></i> <span>Item</span> </a> <a href="#"><i></i> <span>Item</span></a> <a href="#"><i></i> <span>Item</span></a> </div> </div> </div> <main> <a href="#"><i></i> Menu</a> <div> <h2>Bootstrap 5 Sidebar Menu - Simple</h2> </div> <p>A offcanvas "push" vertical nav menu example.</p> <hr> <div> <div> <p>This is a simple collapsing sidebar menu for Bootstrap 5. Unlike the Offcanvas component that overlays the content, this sidebar will "push" the content. Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p> <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p> </div> </div> </main> </div> </div>Related questions 0 Clear a GSAP TimelineMax animation after reversing it 0 Reverting to original state GSAP - TweenlineMax 2 Slow down animation in css3 Related questions 0 Clear a GSAP TimelineMax animation after reversing it 0 Reverting to original state GSAP - TweenlineMax 2 Slow down animation in css3 0 css animation with GSAP 5 How to make a greensock animation reverse but faster than original animation? 0 GSAP timeline animation 0 How to change my second Greensock animation in timeline to start 1 second earlier 0 How to inverse GSAP animation 1 Reverse the CSS animation using jQuery 1 GSAP animation start time Load 7 more related questions Show fewer related questions
Reset to default
