GSAP animation paused: true not working

[potatogandalf]

I'm trying to predefine timelines and execute them on a button click. However, it seems they're somehow executing anyway, since the .theme_picker and .sidebar mysteriously have their style attributes modified. How do I fix this?

See the Pen poRgOQj by potatogandalf (@potatogandalf) on CodePen

[GreenSock]

I don't have a lot of time right now to look through all 200 lines of JS, but I suspect this just has to do with the fact that .fromTo() tweens have immediateRender: true by default, meaning it'll immediately apply the "from" values unless you set immediateRender: false on those. 

// example
.fromTo(
    ".sidebar",
    { xPercent: 0, yPercent: -120 },
    { visibility: "visible", yPercent: 0, immediateRender: false },
    "<"
  );

Does that resolve things for you?