meesrttn

Added changes to CodePen, now works as expected! Thank you

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?

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

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?

I was able to do it myself with: tl.eventCallback('onComplete', setState); function setState(){ promise.resolve() }

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?

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?

That's almost exactly what i'm after thank you so much. I will look into TweenMax some more.

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