Search the Community
Showing results for tags 'video player vimeo playlist'.
Found 1 result
-
I have a vimeo player with an animated thumbnail playlist as a flexbox gallery floating over the screen. I have the thumbnail animation functions in GSAP timelines, but I want to make the source switcher a GSAP timeline as well, but I'm not sure how to go about this one as its not my strong point: I was looking for a little help, and can share more of it when I find the time to make a codepen. I also need to add a z-index change for when the gallery disappears - the gallery is just invisible but still over the screen as it is, so you can't pause the video. <script type='text/javascript'> $('.playBox > span').on('click', function () { var id = $(this).data('id'); var source = "http://player.vimeo.com/video/" + id + "/?autoplay=1"; $('iframe.video-player').fadeOut(100, function () { $(this).attr('src', source).delay(500).fadeIn(500); $('ul.poster-gallery').fadeOut(700); }); }); </script> Below is my timeline to call the gallery (fade in or fade out) as a toggle without switching the source, so user can peruse gallery while video is playing and then close it. var tll = new TimelineMax({paused:true, reversed:true, force3D:true}); tll.staggerTo("li.poster",0.2, {className:"+=vamoos"},0.05); $("#callGall").on("click", function() { if (tll.reversed()) { tll.play(); } else { tll.reverse(); } }); And the CSS class: li.poster.vamoos{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; -moz-transform: scale(.2); -webkit-transform: scale(.2); -o-transform: scale(.2); -ms-transform: scale(.2); transform: scale(.2); opacity:0; -webkit-transition: height 0.8s ease-out, opacity 1.3s ease 0.5s; -moz-transition: height 0.8s ease-out, opacity 1.3s ease 0.5s; -ms-transition: height 0.8s ease-out, opacity 1.3s ease 0.5s; -o-transition: height 0.8s ease-out, opacity 1.3s ease 0.5s; transition: height 0.8s ease-out, opacity 1.3s ease 0.5s; }