Hover triggers sequence of animations

[MartyG]

Hi everyone,

I am trying to have a hover trigger a sequence of animations on different elements in an SVG. The goal: hover over the volcano, and cause these elements to appear in sequence: lavaPlume, cloud2, and textVol. On mouseout, they disappear (in reverse order or all at once). 

I can animate a single element, but adding multiple elements into the function gives me an error:

jeep-test19.htm:41689 Uncaught TypeError: gsap.to(...).to is not a function

 

I also need to have three volcanos, each of which work the same (only the text differs).

 

I have a feeling I am committing some syntax error on stringing together the subactions under "action" function.  Many thanks!

See the Pen BapWQRm by mrsgorgon (@mrsgorgon) on CodePen

[PointC]

Is this what you needed?

See the Pen c49f32432f8227b2733802ff13cf501f by PointC (@PointC) on CodePen

 

Happy tweening.

 

[MartyG]

4 minutes ago, PointC said:

Is this what you needed?

PERFECT, thank you!!

 

Happy tweening.

 

 

[MartyG]

21 hours ago, PointC said:

Is this what you needed?

 

 

Happy tweening.

Uh OH! I thought it was solved, but there's a wrinkle!  I need it to work in Internet Explorer 10. I recall something about the arrow => not working in IE. Can you help again?

 

[PointC]

IE10???? What madness is this? 

 

I think this will work.

See the Pen 57847585faf6710af12aea150e31c572 by PointC (@PointC) on CodePen

 

Happy tweening.

[MartyG]

11 minutes ago, PointC said:

Alas, my client requires IE10. Perhaps I'm being punished for my sins.  THanks very much, that worked.

 

IE10???? What madness is this? 

 

I think this will work.

 

 

Happy tweening.