[Draggable slider breaks on resize]

Added changes to CodePen, now works as expected!

Thank you

[Draggable slider breaks on resize]

With this function I create a slider:

	function createDragger() {
		dragger && dragger[0].kill()
		
		dragger = Draggable.create( wrapper, {
			type:'x', 
			edgeResistance:0.5, 
			throwProps: true, 
			bounds: document.querySelector( '.image-slider__container' ),
			lockAxis:true,
			zIndexBoost: false,
			snap: function( value ) {
				const curIndex = getClosestIndex( this.startX, bounds, bigNum, -bigNum ),
					prevIndex = curIndex ? curIndex - 1 : 0,
					nextIndex = ( curIndex === bounds.length - 1 ) ? curIndex : curIndex + 1
				return bounds[ getClosestIndex( value, bounds, bounds[prevIndex], bounds[nextIndex] ) ]
			},
			minimumMovement:6,
			maxDuration: .4,
			overshootTolerance:0.05,
			onThrowComplete: function()
			{
				currentActive = Math.floor( this.x / ( -( slideWidth * 5 ) / ( slides.length - 1 ) ) )
				const active = document.querySelector( '.image-slider__card.active' )
				if( active ) active.classList.remove( 'active' )
				slides[currentActive].classList.add( 'active' )
				setPagination( currentActive )
			},	  
		} )	
		dragger[0].startX = 0
	}

Then this optimizedResize function fires on resize.

	optimizedResize.add( () => {
		bounds = slides.map( item => -item.getBoundingClientRect().left )
		slideWidth = slides[0].getBoundingClientRect().width
		createDragger()
	} )

But when resizing the view of the slider remains the same and breaks.

Does anyone know how to keep the slides neatly in their view?

 

See the Pen rPNRjj by meesrutten (@meesrutten) on CodePen

[Changing vertical scroll to horizontal scroll with ScrollToPlugin]

Not exactly what I wanted but I seem to have fixed it on my own!

@mikel Thanks!

[Changing vertical scroll to horizontal scroll with ScrollToPlugin]

function replaceVerticalScrollByHorizontal(event) {
  if (event.deltaY > 0) {
    // prevent vertical scroll
    event.preventDefault();

    // manually scroll horizonally instead
    TweenMax.to('.card-holder', 1, {
      onStart: () => {console.log(this)},
      scrollTo: {
        x: `+=${event.deltaY}`,
        y: 0,
      }
    })

  }
  return;
}

window.addEventListener('wheel', replaceVerticalScrollByHorizontal);

 

I'm trying to catch the scroll on the window and make the deltaY value scroll the '.card-holder' element.
Does anyone know why this isn't working at the moment?

See the Pen WXebbO by meesrutten (@meesrutten) on CodePen

[TimelineMax with separate onComplete functions]

I was able to do it myself with:

                    tl.eventCallback('onComplete', setState);

                    function setState(){

                        promise.resolve()

                    }

 

[TimelineMax with separate onComplete functions]

Hey people!

 

I'm working with a TimelineMax timeline.

 

I want to run an animation first.

After the first animation I want to resolve a promise.

 

Then later in a separate function I want to reverse this timeline animation

After this animation I want to resolve a different promise.

 

I'm not sure how to do this.

 

Any advice?

[Repeating code for more elements with a delay]

Oh and, by the way, welcome to the Forums!

 

As some of the others say here: "Happy Tweening!"

 

I currently don't have the money to invest in plugins for TweenMax..

Do you know a way how I can substitute CustomBounce and CustomEase?

I feel like I wasn't that far off with my original code. 

Could you give me a push in the right direction?

[Repeating code for more elements with a delay]

Do you HAVE to use TweenLite?

 

If you can, use TweenMax. It will make a world of difference, together with CustomEase and CustomBounce, your work is cut by 90%.

 

A fork of your pen: 

See the Pen NbPxQJ?editors=0010 by dipscom (@dipscom) on CodePen

 

Custom Bounce starter pen for you to play with and read more detailed info: 

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

 

Would that be what you are after?

 

That's almost exactly what i'm after thank you so much.

I will look into TweenMax some more.

[Repeating code for more elements with a delay]

Hi, 

I have a question about looping and delaying some elements.

In the codepen link I provided will be an example of what I want to achieve.

The problem is that I don't know how to loop the code...

If I paste the code 16 times it will work for all of the rectangles.

Is it possible to make a loop with TweenLite? 

 

This is a part of my code: 

 

var rect = document.querySelectorAll('.rectangle');


i = 15;


var tl = new TimelineLite();
tl
  .from(rect[i--], 0.3, {
    y: '-1000',
    scaleY:5,
    ease:Power1.easeIn
  }, "fall")
  .to(rect[i+1], 0.15, {
    transformOrigin: "bottom 50%",
    scaleY: 0.75,
    scaleX:1.5,
    ease:Power1.easeOut
  }, "squash")
  .to(rect[i+1], 0.2, {
    y: '-200',
    scaleY:1.3,
    scaleX:0.8,
    ease:Power1.easeOut
  }, "bounce")
  .to(rect[i+1], 0.15, {
    y: '0',
    scaleY:1,
    scaleX:1,
    ease:Power1.easeIn
  })
  .to(rect[i+1], 0.2, {
    y: '0',
    scaleY:.8,
    scaleX:1.35,
    ease:Power1.easeOut
  }, "bounce-fall")
  .to(rect[i+1], 0.2, {
    y: '-100',
    scaleY:1.2,
    scaleX:0.8,
    ease:Power1.easeOut
  }, "second-bounce")
  .to(rect[i+1], 0.15, {
    y: '0',
    scaleY:1,
    scaleX:1,
    ease:Power1.easeOut
  }, "final-position")

I want to loop this animation for every rectangle (there are 16)

with a delay of 0.5 seconds between each rectangle falling.

How can i achieve this?

 

Thanks in advance

 

See the Pen BQyjLJ by meesrutten (@meesrutten) on CodePen