Is Immediate Render the solution?

[Caroline_Portugal]

Hey guys, first I'd like to say I am in love with GSAP. I am new to the product but have been so incredibly impressed with it and the amazing community. I'm definitely sticking with GSAP at work now. 

 

Here's a little logo I want animated on mouse over: 

See the Pen OyMbva by carolineportugal (@carolineportugal) on CodePen

 

I am having two problems with it:

 

1. I'd like the start position of the sea to be 0. I don't understand why, even with the animation not having started, the starting position has already changed.  

2. On mouseover/mouseout there's a strange flickering of the sea's position. 

 

Basically what I'd want to happen is on the first mouse over the sea goes from 0 to 60 but after playing once it'd only oscillate between 60-30, 30-60. So 'seaStart' would only be played on the first mouse over but not on the consecutive mouseovers. 

 

Thanks so much for any help you guys can give!

 

 

 

[Diaco]

Hi Caroline_Portugal 

 

pls check this out : 

See the Pen Qjypva by MAW (@MAW) on CodePen

[Caroline_Portugal]

This service is amazing. I'm so addicted to GSAP.

 

Thanks, Diaco!

[Caroline_Portugal]

Hey Diaco, it seems the animation (and codepen) doesn't run in Firefox. Can't figure out why. Any ideas?

[Diaco]

the problem come from your css , pls remove this from your css :

#cloud1,#cloud2 {  display:none; }

 

See the Pen Qjypva by MAW (@MAW) on CodePen

[Caroline_Portugal]

Really appreciate your help, thanks Diaco.