Animating YouTube Video with Greeensock

[innocean_dev]

Hello,

 

I can't seem to animate a div that contains a youtube video and I have a project that due asap. I want to be able to animate the opacity or the position. The animation either won't occur or the animation will stop before it has completed. Please let me know what I might be doing wrong. Thanks!

 

::Carey::

See the Pen zwWaPW by gredesign (@gredesign) on CodePen

[GreenSock]

It looks like you're using a JavaScript tool that's actually REPLACING that dom element completely with an iframe. In other words, you're telling GSAP to animate a particular element, which it does, but part-way in, a different script REMOVES that element and replaces it with an iframe and copies the current inline styles over. So this isn't a problem with GSAP - it's just that the target is getting swapped out from under it. 

 

One easy solution would be to wrap that element in a container <div> or something, and animate that instead of the video itself. Kinda like: 

See the Pen 72e2f33aada76eaac45c31ad8f408b82 by GreenSock (@GreenSock) on CodePen

 

[innocean_dev]

Thank you! I made a wrapper around the div that was getting replaced with the iframe. Now it works fine. I appreciate your time and help.

 

::Carey::

[GreenSock]

No problem! Happy tweening.