Issue with Animation Playback Depending on Initial Status

[hebert lima]

Hello, I would like some help solving an issue:
 

I've attached a CodePen with details of the implementation:

I have a menu that opens and closes, and the status of this menu is stored in the browser session (open/closed). When the initial status is "open", the animation plays normally ("start" -> "end").

The problem occurs when the initial status of the animation is "closed"; it should play ("end" -> "start"). I'm setting the position as follows:
 

if (!toggle) {
  // define if the menu should inicialized closed and set seek to ("end")
  tl.seek("end").pause();
}

But when I click play, the animation doesn't occur (nothing happens).

if (this.reverseTimeline) {
	tl.play()
} else {
	tl.reverse()
}

 

See the Pen MWRzpPW by hebertlima (@hebertlima) on CodePen

[Rodrigo]

Hi @hebert lima and welcome to the GSAP Forums!

 

Is always better to use the reversed() method to toggle a GSAP Tween/Timeline instance:

https://gsap.com/docs/v3/GSAP/Tween/reversed()

https://gsap.com/docs/v3/GSAP/Timeline/reversed()

 

Then you can use the browser's sessionStorage to keep the value:

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

 

Here is a fork of your demo:

See the Pen GRLwEQq by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[hebert lima]

Hello @Rodrigo, thank you for the quick response!

I made the changes in my code and it almost worked,
I'll insert the actual code down here to explain better:

 

createTimeLine() {
  const logoRef = this.$refs.logo

  const children = Array.from(logoRef.$refs.logo.children)
  const letters = children.filter((c) => c.nodeName === "g")

  const timeline = gsap.timeline({
    paused: true,
    yoyo: true,
    defaults: {
      duration: .100,
    }
  })

  timeline.to(letters.reverse(), {
    y: 100,
    opacity: 0,
    stagger: .1,
  }).to(logoRef.$refs.green, {
    x: 125, y: 30
  }, "-=25%").to(logoRef.$refs.purple, {
    x: -125, y: -30,
  }, "<").to(logoRef.$refs.logo_container, {
    width: "28px"
  })

  this.$refs.navItem.forEach(navItem => {
    timeline.to(navItem.$refs.label, {
      x: -10,
      opacity: 0,
      display: "none",
    }, "<").to(navItem.$refs.badge, {
      opacity: 0,
      display: "none"
    }, '<')
  })

  timeline.to(this.$refs.collapsed, {
    x: -100,
    opacity: 0, 
  }).call(() => {
    this.sidebar.toggle() // useSidebarStore()
  }).fromTo(this.$refs.toggle_button, {
    display: "inline-flex", 
    width: '239px',
    height: 'auto',
  },{
    width: "auto", 
    display: "block", 
    height: "28px" 
  })

  this.$refs.navItem.forEach(navItem => {
    timeline.to(navItem.$refs.badge, {
      opacity: 1,
      display: "block"
    })
  })

  timeline.fromTo(this.$refs.back, {
    display: "hidden", 
    opacity: 0,
  },{ 
    display: "grid", 
    opacity: 1 
  }).addLabel('end').reverse()

  this.timeline = timeline
},

toggle() {
  this.timeline.reversed(this.sidebar.collapsed) // button action
},

In the video, the functional behavior is shown,
the problem occurs when I refresh the page, and when I need to restore the last status (closed), it doesn't seem to execute all the tweens. That's why I was using this.timeline.seek('end').

I have attached an image of how it currently looks when the initial status is "closed".

[Rodrigo]

You might want to use localStorage instead of sessionStorage then:

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

 

Maybe the demo in this post can help:

 

Happy Tweening!