meesrttn

Members
  • Content Count

    10
  • Joined

  • Last visited

Community Reputation

4 Newbie

About meesrttn

  • Rank
    Member

Recent Profile Visitors

532 profile views
  1. meesrttn

    Draggable slider breaks on resize

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

    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?
  3. Not exactly what I wanted but I seem to have fixed it on my own! @mikel Thanks!
  4. 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?
  5. meesrttn

    TimelineMax with separate onComplete functions

    I was able to do it myself with: tl.eventCallback('onComplete', setState); function setState(){ promise.resolve() }
  6. 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?
  7. meesrttn

    Repeating code for more elements with a delay

    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?
  8. meesrttn

    Repeating code for more elements with a delay

    That's almost exactly what i'm after thank you so much. I will look into TweenMax some more.
  9. 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