HomTom Posted April 14, 2020 Share Posted April 14, 2020 In my animation, I can start the animation by clicking on the Red button in the top right corner of the page. But I also want to be able to reverse the animation by clicking a second time on the same button. To achieve this I'm using this condition, but it's not working: tl.reversed() ? tl.play() : tl.reverse() This is the complete code: const tl = gsap.timeline({ defaults: { duration: 1 } }) tl.from('.anim1', { stagger: 0.6, y: -50, opacity: 0 }) .from('aside', { backgroundPosition: '200px 0px', opacity: 0 }, '-=1.5') // relative timing (-= means sooner) .from('img', { y: 30, opacity: 0 }, '-=0.5') const playBtn = document.getElementById('play-btn') playBtn.addEventListener('click', () => { tl.reversed() ? tl.play() : tl.reverse() }) See the Pen LYppreB by itsthomas (@itsthomas) on CodePen Link to comment Share on other sites More sharing options...
HomTom Posted April 14, 2020 Author Share Posted April 14, 2020 Sorry, I now found out why it wasn't working. I had to add a higher z-index to the button. I wanted to delete the question but couldn't find any Delete option. Link to comment Share on other sites More sharing options...
PointC Posted April 14, 2020 Share Posted April 14, 2020 Thanks for letting us know you solved it. No worries on deleting the thread. It may help someone else in the future. 5 Link to comment Share on other sites More sharing options...
Carl Posted April 14, 2020 Share Posted April 14, 2020 your code is fine, but if you want to simplify it even further with a little power tip you can toggle the reversed() state like so: playBtn.addEventListener('click', () => { tl.reversed(!tl.reversed()) }) that basically says set the reversed() state to the opposite of the current reversed() state. 5 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted April 14, 2020 Share Posted April 14, 2020 Its also discussed in that video tutorial: https://www.youtube.com/watch?v=YqOhQWbouCE&feature=youtu.be&t=1295 But I would go with Carl's suggested approach instead. 😉 1 Link to comment Share on other sites More sharing options...
TrulyNewbie Posted November 10, 2020 Share Posted November 10, 2020 Hi, if you spam click the button the animation keeps playing and replaying. How can I make it so it's like one press = one animation complete? Thank you Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 10, 2020 Share Posted November 10, 2020 5 minutes ago, TrulyNewbie said: How can I make it so it's like one press = one animation complete? playBtn.addEventListener('click', () => tl.play(), { once: true }) Link to comment Share on other sites More sharing options...
TrulyNewbie Posted November 10, 2020 Share Posted November 10, 2020 2 hours ago, ZachSaucier said: playBtn.addEventListener('click', () => tl.play(), { once: true }) Thank you, but I'm unsure where to add this? And I'm not sure if I explained myself properly, but what I want is that each click (open and close button) completes before being clicked again. At the moment I can click and close quickly causing a flash Here is my code pen - See the Pen bGeQWbQ by NewbieRuby (@NewbieRuby) on CodePen Thank you Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 10, 2020 Share Posted November 10, 2020 @TrulyNewbie Thanks for the minimal demo. First off: use the new syntax. It's sleeker and lets you use new features. Upgrading is easy! Here's how I might do that sort of thing, sticking to more performant properties: See the Pen pobQPXE?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
TrulyNewbie Posted November 10, 2020 Share Posted November 10, 2020 11 minutes ago, ZachSaucier said: @TrulyNewbie Thanks for the minimal demo. First off: use the new syntax. It's sleeker and lets you use new features. Upgrading is easy! Here's how I might do that sort of thing, sticking to more performant properties: Thank you for this. I really appreciate it. I'm sorry to be a pain, but if you click the button repeatedly, it starts and stops (causing a flash). How can I make it so the transition completes before the being pressed again? Thank you Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 10, 2020 Share Posted November 10, 2020 Check if it's active: See the Pen XWKygLy?editors=0010 by GreenSock (@GreenSock) on CodePen The docs are an incredibly useful resource - you should learn to use them well 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