Jump to content
Search Community

Is it possible to reverse nested timelines using TimelineMax?

joe.cardella test
Moderator Tag

Go to solution Solved by joe.cardella,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Is it possible to reverse a master timeline within GSAP? I know you can reverse a timeline that is not nested.

Here's the code:

// hide copy content divs
const hideCopyContentDivsTl = new TimelineMax()
hideCopyContentDivsTl.to(copyContentDivs, 1, {
height: 0,
width: 0,
autoAlpha: 0
})

// shrink copy wrapper div
const shrinkCopyWrapperTL = new TimelineMax()
shrinkCopyWrapperTL.to(copyWrapperDiv, 1, {
width: '2%',
height: '4%'
})

// fade remove bg and change to white
const fadeLargeBgImgTl = new TimelineMax()
fadeLargeBgImgTl.to(largeImage, 1, {
backgroundColor: "#fff"
})

// the master timeline to manage the parts
const masterTimeline = new TimelineMax({paused: true})
masterTimeline.add(hideCopyContentDivsTl)
.add(shrinkCopyWrapperTL)
.add(fadeLargeBgImgTl)

// assume that there is a mechanism to change the state of playVideo between true and false
if (this.state.playVideo === false) {
console.log("should play: ", masterTimeline)
masterTimeline.play()
} else {
console.log("should reverse: ", masterTimeline)
masterTimeline.reverse()
}

I can get it to play forwards, just not in reverse. Do I need to tell the browser where to start in the timeline so that it can play in reverse?

 

http://stackoverflow.com/questions/38440731/greensock-animation-platform-is-it-possible-to-reverse-nested-timelines

Link to comment
Share on other sites

  • Solution

The problem is with my code and not with GSAP. I have new timelines created on every click. How will it reverse something that it doesn't have a previous reference to?

 

The solution would be to create the timelines outside of the click event and then based on the state, get that instance of the timeline and play forward or reverse the animation.  

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...