Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
elrond25

Morphing play/pause icons not working

Recommended Posts

I'm trying to create a morphing icon to overlay a video.

 

It's partially working, the first time the video is paused it works as intended but pressing it again show the icon in its final state without the animation. 

 

The second animation to go from pause to play never triggers. 

 

Any guidance as to what I'm doing wrong is greatly appreciated. 

See the Pen jmEKqE by caraya (@caraya) on CodePen

Link to post
Share on other sites

It looks like you had your animation set to play() for both states (instead of playing for one state, and reversing to get to the other). 

 

I simplified things a bit and tossed in some SVG that I had previously built for a play/pause button that morphs nicely:

http://codepen.io/GreenSock/pen/41bb455ea98be57d661e424c3612b3ae/?editors=0010

 

Is that kinda what you're looking for? I realize you may want to toggle visibility of things differently, but I was focusing on the morphing. 

  • Like 3
Link to post
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.

×