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". Screen Recording 2024-04-20 at 13.18.36.mov

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() }