Jump to content
Search Community

sequence-video without jquery

Josefina 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

The only jQuery I see is the button handlers ...

 

$('#someButton').click( function(){
 ...
});

 

 

You can swap that out for plain JS like so

 

someButton = document.getElementById( 'someButton' );
someButton.addEventListener( 'click', someFunction );

function someFunction(){
 // Do some things
}

 

  • Like 5
Link to comment
Share on other sites

Thanks @Shaun Gorneau and @PointC, I

think this is jquery too:

$("#slider").slider({
  range: false,
  min: 0,
  max: 100,
  step:.1,
  slide: function ( event, ui ) {
    tl.pause();
    //adjust the timeline's progress() based on slider value
    tl.progress( ui.value/100 );
    }
});    
        
function updateSlider() {
  $("#slider").slider("value", tl.progress() *100);

 

I guess I was having difficulty adjusting this to plain js.

Link to comment
Share on other sites

39 minutes ago, Josefina said:

Thanks @Shaun Gorneau and @PointC, I

think this is jquery too:

$("#slider").slider({
  range: false,
  min: 0,
  max: 100,
  step:.1,
  slide: function ( event, ui ) {
    tl.pause();
    //adjust the timeline's progress() based on slider value
    tl.progress( ui.value/100 );
    }
});    
        
function updateSlider() {
  $("#slider").slider("value", tl.progress() *100);

 

I guess I was having difficulty adjusting this to plain js.

 

That slider is there to illustrate/manipulate the progress of the timeline and is part of jQuery UI. If you need to replicate that functionality without jQuery/jQuery UI ... you might want to look into (sorry, wrong link ... I'll find the right one)

 

Edit: @PointC's use of draggable is perfect :)

  • Like 2
Link to comment
Share on other sites

It looks like Shaun is working on an answer, but I'll jump in quick while we wait for his reply. You've got a couple issues with the project. 

 

To wire things up from my demo to your project, you'd need to target your masterTl timeline with the draggable element and all the event handlers.

 

1. Wiring a slider up to an infinite timeline (you have repeat:-1 on several nested timelines) is tricky. I would imagine you'd want users to be able to scrub the animation from start to finish so I've removed the repeats in my fork.

2. The other issue is setting the dragger bounds to 100% instead of a fixed width. This can work by getting the width of the bounds and restricting the dragger to those coordinates. The trick is on resize. You need to listen for a resize event and set new bounds as well as re-position the dragger correctly so it's at the same percentage point of the new bounds. 

 

Here's a fork of your pen with everything working correctly.

 

See the Pen MGgzaq by PointC (@PointC) on CodePen

Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

Thanks for all your help @PointC!!!

I'm almost there!

Is there a reason, why most of the animation happens at the beginning of the dragger? On my live site, it seems that you can drag all the way till the end but everything happens at 5% of the dragger progress.
Also, I'm having an issue with theDragger, seems like it didn't have a variable, so I defined it at the top of the file. It resolved some issues, but not all of them.
I have on codepen a mini version of my application here:

See the Pen MGgxYB?editors=1010 by joseterrera (@joseterrera) on CodePen

I'm running the application also here: http://e5ff19c7.ngrok.io/

Link to comment
Share on other sites

You still have an infinite timeline in your bunnyInTheBack() function which will cause problems with the master timeline progress() slider.

 

// this is a problem
const bunnyInTheBackTl = new TimelineMax({repeat:-1, repeatDelay: 10});

 

If you want that rabbit to pop up/down forever, I'd recommend making it a separate tween or timeline so it doesn't cause problems with your masterTl. Or you could set it to just a couple repeats if you prefer to leave it as part of the master.

 

Happy tweeing.

:)

 

 

 

  • Like 1
Link to comment
Share on other sites

 

Just jumping in quick regarding the use of sliders to control an animation.

In addition to PointC's clever Draggable version you can also use an HTML input element as shown below

 

 

<input id="progressSlider" type="range" min="0" max="1" value="0" step="0.001" />

 

See the Pen JGeagb?editors=1010 by GreenSock (@GreenSock) on CodePen

 

And for the most flexible, responsive, powerful and easiest-to-use, I would suggest GSDevTools. It is a Club GreenSock membership bonus that will save you tons of time:

 

See the Pen bad0028df25b4a588fe8342c37b432b5 by GreenSock (@GreenSock) on CodePen

 

Learn more about GSDevTools: https://greensock.com/gsdevtools

 

And since you're already a member you can grab it now ;)

 

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