dresscode

Figured it out. In the pen below, I added: onReverseComplete() { TweenMax.set('.container', {clearProps:"all"}); TweenMax.set('.box', {clearProps:"all"}); } It seems I just wasn't applying clearProps correctly. Thanks for your help OSUblake. https://codepen.io/dresscode/pen/pozrRKJ

The clearStyles function used to contain my clearProps() methods. They weren't working so I removed them. I have now removed the clearStyles call. In the full version of this app, I am testing the orientation and size of the screen and then creating a timeline with parameters specific to that size and orientation. Then, as you suggested, the Back button is reversing that one timeline. So, unless I am misunderstanding, I think i am already doing a version of what you describe here. The issue comes after the animation is complete.

The pen below shows the issue. There is now a media query that changes the orientation of the boxes to vertical. If you start in horizontal orientation (above 1250px) and click a box, the animation will run and then you can click the Back button to reverse. At that point, if you resize the screen to a width below 1250px, the media query no longer works. Please note that I haven't added an animation for the boxes in vertical orientation. https://codepen.io/dresscode/pen/pozrRKJ

Thanks OSUblake. I've implemented your suggested approach and the animation is now working. clearProps usage is in relation to an issue I am having after the animation where my css media queries are superseded by inline styling left behind by the animation. clearProps doesn't seem to be working or maybe I'm applying it incorrectly. Any advice?

Hi all, I have a page with clickable divs built with GSAP in vue.js. Clicking a div triggers a timelineMax animation that moves all three divs, changes their opacity, etc. When clicked, the “BACK” button applies the reverse() method, returning the divs to their original positions and styling. After reversing the animation, I am using the clearProps method to remove any remaining inline styling. As I am new to GSAP, I imagine there is a more elegant way of doing all of this but, it works. The issue arises when the user goes through this process again. When the divs are reset and user clicks one of them, the initial animation works but the reverse animation is very wonky. It seems to jump immediately to the beginning of the timeline, while simultaneously trying to reverse. It’s difficult to figure out exactly what’s happening because the debugger won’t step through the reversing timeline. Any advice would be appreciated. Thanks.