Jump to content


Greensock Lightbox with Videos

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

Hi phillip_vale,


To what, exactly are you referring to when you ask if is there a better way?


To line up several videos to load? To animate the lightbox in and out? Or to have less code in you animation? Or everything, really?


My guess is: "everything".


This is not really a GSAP focused question but I hope I won't be told off too much here.


You can simplify your code to only generate the necessary HTML inside the lightbox once you have clicked.


Hang on, working on the code. Will edit this a post something in a bit. Sorry for the suspense.

  • Like 1
Link to comment
Share on other sites

Here is a forked version of your code.


I have left your original code in and commented a bunch of things to help you understand the reasoning.


See the Pen zBVpLA by dipscom (@dipscom) on CodePen


Hope this helps.


The advantage of this setup is that you are reusing the same tag over and over again, rather than creating a bunch of tags and showing/hiding them when you need.

  • Like 2
Link to comment
Share on other sites

Hi Dipscom,


Thank you so much for your help.


The end result will hopefully use alot more greensock once it is on a website and i would like to eventually have the videos scrolling through once the lightbox is open so this is awesome help.


I was hoping to use divs as the links though. Is this impossible because we need the child nature of a list? 


This is probably moving away from a greensock forum now but is there a way to match up the amount of .item divs to the videos?


Is this where i would start?


var x = document.getElementsByClassName("example");





Link to comment
Share on other sites

This is moving towards more general JavaScripting, but theres no reason why you can't use DIVs for links, instead of the LI.


Here's a fork with Dipscom's Pen with the nav as divs.


See the Pen QEXRrw by joemidi (@joemidi) on CodePen


Works exactly the same.

  • Like 2
Link to comment
Share on other sites

Joe got here before I did and said exactly what I was going to say.


The idea will work with any element. The .children() will work with any DOM element, I only converted from <div> to an unordered list because it is the conventional way of creating navigation. That's the standard people use out in the wild. But, you can use any DOM element your heart longs for.

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