Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

meesrttn

Members
  • Posts

    10
  • Joined

  • Last visited

Posts posted by meesrttn

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

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

  3. I was able to do it myself with:

                        tl.eventCallback('onComplete', setState);
                        function setState(){
                            promise.resolve()
                        }
     
    • Like 2
  4. 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? :)

  5. 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? ;)

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

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

×