Greensock Lightbox with Videos

[phillip_vale]

Hi,

 

Is there a better way to do this? I want to load about 15 different videos all up for a portfolio type site.

 

Any help is appreciated.

 

Thanks,

 

Phil

See the Pen YWoVyv?editors=1000 by phillip_vale (@phillip_vale) on CodePen

[Dipscom]

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.

[Dipscom]

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.

[phillip_vale]

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");

 

Cheers,

 

Phil

[joe_midi]

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.

[Dipscom]

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.