Jump to content


Is Immediate Render the solution?

Go to solution Solved by Diaco,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!




Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.