[sequence-video without jquery]

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/

[sequence-video without jquery]

I guess my question is, how do I tie draggable to my go() function that contains my animation sequence. @PointC, @Shaun Gorneau

[sequence-video without jquery]

2 hours ago, PointC said:

 

Thanks @PointC, that looks perfect. I'm sorry to ask yet another question. How do you tie draggable to the actual animation?

I have a working codepen here, with your draggable: 

See the Pen yKdoKX?editors=0010 by joseterrera (@joseterrera) on CodePen

 

 

 

[sequence-video without jquery]

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.

[sequence-video without jquery]

Is there a sequence-video like this one:

https://greensock.com/sequence-video

 

that doesn't use jquery, but just plain javascript?

 

thank you!

[Moving Clouds]

something like this @PointC? somehow this creates an error...

.add(clearStage(), 'scene-clear-stage', 0)

.add(cloudsMoving(), 'clouds-moving', 1)

.add(enterFloorVegetation(), 'scene-floor-vegetation', 0)

[Moving Clouds]

Thank you for the feedback @PointC and @OSUblake.

As far as running animation simultaneously, how do I go about it?

 

It seems that the other animation I have does not start running until the cloud one stops. But the cloud should be moving all the time, at the same time as the other animation that I have (such as eyes blinking, flowers moving, eggs shaking etc).

 

[Moving Clouds]

I'm having an issue with clouds which doesn't fully show on this pen since it looks as if they are moving all the way through. I'm tyring to get them to move from left to right. On the actual site, they stop at a certain point and disappear and start over.
How do we calculate position responsively and make it move along the screen?

See the Pen yKdoKX?editors=0010 by joseterrera (@joseterrera) on CodePen

[flip an object]

Thank you for the fast feedback. 

I can definitely work with the red box animation.

Thank you!

 

[flip an object]

I'm trying to create this effect.

A hand/paw pushes an object and the object either flips or wiggles a bit and drops something.

The wiggle effect so far looks a bit too strong.

When I try something like:

 

.to("#basket", 1, {rotation:-10, transformOrigin:"right 30%"})

.to("#basket", 1, {rotation:0, transformOrigin:"0"});

The object does not go back to its original spot. 

Any suggestions?