Jump to content
Search Community

Creative Vimeo Player interface - I could use some help adding more GSAP

T.Gregory 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 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;
}
Link to comment
Share on other sites

You definitely shouldn't be doing a className tween to a CSS class that has CSS transitions applied, as they'll basically fight with GSAP for control of the same properties. You either animate with GSAP -or- CSS (not both at the same time on the same properties). 

 

I was struggling a bit to understand what your specific question is regarding GSAP. Can you please clarify and also provide a reduced test case in codepen so that we can see what's going on in your code? That'd really help. Were you just trying to figure out how to rewrite that jQuery-based code that used fadeOut() to be GSAP instead? 

  • Like 2
Link to comment
Share on other sites

Yes - I ran into some frustrations and figured the addClass wasn't the way to go. A while back, I had read in a few forums that it is best to control the animation with jQuery but write it with CSS, and I'm just realizing now that those were not GSAP forums - I think it was Chris Coyier from CSS Tricks. 

 

Anyway - I will make a pen so you can see what is going on - its hilarious - It actually works, but the code and logic are sloppy. It was the best I could do with a limited understanding of jquery, GSAP and mostly - a limited knowledge of how to find examples of syntax for what I want to do. 

 

I'm in the middle of the 4th of July holiday - so I have to do some family fun for a few hours, but I will make a pen this evening and am anxious to so how this looks done right... Thanks for your interest, and, by this evening - I mean Pacific Standard. 

 

Todd

Link to comment
Share on other sites

http://codepen.io/code-a-la-mode/details/qNjpmk/

 

 

OK, Jack - I made a Pen but have spent the past 3 hours trying to get the timing functions on Stagger to overlap slightly and I forgot how. Trial and error is not the method. I just want to get rid of the pause when you click to hide the gallery, but its not priority. 

 

 

The intention of the controls are "-" button on the left should scale the thumbs down to scale 0.6.... the  "+" on the right of course, back up to scale:1.... and the dotted icon in the middle hides and reveals the gallery.

 

Anyway - the responsiveness is a little off on the Pen/ there should be 4up pics per row - but it wont affect the functions I'm working on. 

 

I welcome any input, and only request that anyone helping resist the urge to test very advanced methods. Straight up simple so I'm most likely understand it and be able to maintain and continue to adapt it, etc...

 

Looking forward to learning the right way : )

Todd

Link to comment
Share on other sites

Hi,

 

Thanks for the demo.

 

I'm not sure what the question is. You said you want to get rid of a pause when you hide the gallery but its not a priority.

 

 

 

In these cases it really helps if the demo is reduced as much as possible. I found it very difficult to see all of the thumbnails at once and the video was very distracting. 

 

I reduced it down to 3 thumbnails and no video. 

 

http://codepen.io/GreenSock/pen/xOAJjB

 

I'm unable to discern any pause when I click any of the buttons.

 

If you can clarify what the problem is I'm sure we can help.

 

Thanks!

 

One note: In cases like this where multiple buttons do unique animations on the same elements it is better just to create the timelines when the buttons are pressed instead of reversing and pausing unique, pre-existing timelines. Consider the situation where timelineA is currently playing and then user clicks a button to reverse timelineB then there is a very good chance there will be an awkward jump as where you are in timelineA probably looks nothing like where the playhead is in timelineB. Also there is a high likelihood that tweens in both timelines will be fighting for control over the same properties of the same objects, resulting in undesirable results. 

  • Like 2
Link to comment
Share on other sites

The question was can I get some help converting one of my jQuery functions to GSAP - as proposed in my first post.

 

I had done the best I could but needed more thorough code to handle the back and forth interactions with my timeline toggling - just as you re-explained above. 

 

Jack had asked me to make a pen so he could help. I decided to put my time into making a pen and getting the help as it was a safer bet that continuing on with trial and error. 

It was a challenge removing this section from the site and making a Pen as I had integrated it with one of those overkill themes with some 60,000 lines of code. Its tricky to remove something from an environment with so many classes etc on top of my own, so it took me most of the night. 

 

If Jack is still interested in helping, I'd love to follow up on that. Or anyone out there reading this? : ) 

 

Or would it be recommendable to find a paid service? It's kind of hard to turn back now and finish the site without the Greensock. To anyone new reading this, I'm just looking to clean up my toggled timeline's that are bumping into each other. I've maxxed out my ability level and got lucky with some guesses. The Pen is of an overlay video gallery with animated show/hide thumbnails and options size thumbnails up or down - and I just added a button to autoscroll the thumbnails like netflix does - on my desktop file, (not in the pen yet)...

 

Todd

Link to comment
Share on other sites

Eureeka - I just realized I can accomplish what I'm trying to do with just one function.  If I use one 3 step cycle [ a,b,c; a,b,c]  instead of 3 separate [ a toggle b toggle a] etc. 

 

Anyone know how to do this? It would simply be  > click >  hide thumbnails  >click> reveal thumbs scale:0.5  >click> thumbs at full scale >click> complete cycle with hide... 

 

If I can see a working example, I should be good. This is a much better way overall, I think... Anyone know any pens displaying a timeline or tween with a 3 click cycle?

Link to comment
Share on other sites

You get the most flexibility with generating the animations that you want when you need them, but yes, you can step through a single timeline in the way you described by adding pauses (via addPause()) to your timeline and then playing the timeline each time the button is clicked.

 

Here is a working demo. You can change the values to match your specific needs

var tl = new TimelineLite({paused:true});

tl.staggerFrom(".box", 0.5, {autoAlpha:0, scale:0.5}, 0.2)
  .addPause()
  .staggerTo(".box", 0.5, {scale:0.5}, 0.2)
  .addPause()
  .staggerTo(".box", 0.5, {autoAlpha:0, y:-50}, 0.2)

var next = document.getElementById("next");

next.onclick = function() {
  //if timeline is done playing go back to beginning 
  if(tl.progress() == 1) {
    tl.restart();
  } else {
    tl.play();
  }
}

http://codepen.io/GreenSock/pen/dXRwgW?editors=0010

 

A potential downside of this simplified approach is if you need to wait until the timeline is paused before clicking again. 

  • Like 2
Link to comment
Share on other sites

Thanks Carl and Jack - I'm glad I came back here to check and discovered the example code. I was in the middle of trying to reverse engineer another GSAP Pen I found that was way to complex for my needs. This example Carl provided is much more suitable. 

 

Being tired, I had forgotten to mention the reason I came to the forum in the first place. I wanted to work the video source change function into the timeline so it didn't conflict with the rotation. It would inevitable move the rotation into the Hide-Gallery step and throw off the timeline. 

 

This is the function 

<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>

This just needs to be in synch with the cycle somehow. But I'm not sure how to approach it and I'd have to guess at the syntax - I'm sure there's few hard ways - and one or two easy/efficient ways... etc

Link to comment
Share on other sites

You can change the src attribute of an image (assuming video too) using the AttrPlugin (included in TweenMax).

You can sequence the src attribute changing like this:

 

var tl = new TimelineLite();

tl.to(image, 1, {x:200})
  .set(image, {attr:{src:"http://greensock.com/wp-content/themes/greensock/images/greensock-logo.svg"}})
  .to(image, 1, {x:0})

http://codepen.io/GreenSock/pen/akwAbB?editors=0010

Link to comment
Share on other sites

Thanks Carl - I'll see what I can do with that. I've seen a few player that use  img src to switch out video, so I'm thinking it will work.

 

To explain why the gallery is overlaying the video screen: The video screen will be hidden behind the gallery and when the user click on the thumbnail they want to see, the white background fades out as the video starts playing  and the thumbnails animate out. But then, quite often, the user wants to see the thumbnails again and so they can opt to click for a small size thumb if they want still see keep an eye on the screen, or full thumbnail - which will bring back the white back ground and be more like changing tasks..

Its mostly to save space and minimize scrolling for devices.

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