Controlling GWD animating wit Greensock

[EricIEM 0 Likes (Newbie)]

Hi,

I'm completely new to greensock, and it sounds amazing. I made an html animation with Google Web Designer, but i'm having trouble controlling the playback of my animation. I have a main div, with multiple nested divs, each with their own animations at a specific time in the timeline. What I want to do is be able to play that animation from the start to let's sec 1.6 seconds and pause, wait for a click event then play from 1.6 seconds to 5 seconds then pause ant wait for click, and so on. I've tried tutorials to insert the greensock js files and use timelinemax to control the timing, but my project doesn't seem to want to respond. It doesn't listen to pause events at all.

I could be totally wrong, but doesn't greensock act as a wrapper for my whole timeline where i can control everything about it?

Is it because the animations that i have in GWD are css animations and greensock can't control that?

 

 

 

[Shaun Gorneau 1,503 Likes (Superhero)]

@EricIEM,

 

I’ve never used GDM, but if it has its own timeline mechanism, GSAP would likely not have any hooks into that. Furthermore, if GWD’s output is straight to CSS transforms ... then that would fight GSAP as GSAP interpolates javascript object properties.

 

GSAP constructs its own timelines with its own properties and methods.

 

If you post your project or a code snippet, we can give you much more specific help.

[explorerzip 80 Likes (Contributor)]

Google Web Designer does have it's own timeline just like Adobe Flash / Animate. You can technically create animations using the GWD / Flash timeline and GSAP at the same time, but you might cause some conflicts like Shaun said. With these graphical tools I find it best to use them for layout only and use GSAP for animation only.

 

Here's an old post from the forums that should help you insert GSAP into GWD. The exact steps might have changed since GWD is constantly evolving.