Jump to content
Search Community

Animating YouTube Video with Greeensock

innocean_dev test
Moderator Tag

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



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!



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

Link to comment
Share on other sites

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


  • Like 2
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.
  • Create New...