[How test different easing options with GS Dev Tools?]

Is there a way to test different easing types via GS DevTools?

[How to play BodyMovin or Lottie .json animations in GSAP 3 without useFrames?]

Looks like someone asked this exact question on the v3 release page - 

 

[How to play BodyMovin or Lottie .json animations in GSAP 3 without useFrames?]

Hi forums, Is useFrames the only method of playing .json animations exported from After Effects via Bodymovin? Is there a better way to play BodyMovin / Lottie animations than useFrames in GSAP 3? 

 

See the Pen VwLzVBB?editors=1010 by clzd (@clzd) on CodePen

[How to play animation functions]

hello. I need help with the numbered navigation on this codepen (http://deleted) . Each prev/next slide animation has onStart function call that play a sliding animation from an array using a currentIndex value to play the right timeline. It works ok if a user clicks in numerical order. But when clicking the numbered navigation I dont think the correct currentIndex values are being passed to the timelines.

	/*
		 *   If there's a previous slide, slide to it
		 * */
		function goToPrevSlide(slideOut, slideIn) {
			var tl = new TimelineMax(),
					index = slideIn.next().index(),
					size = $('.slide').length;

			currentIndex = index;

			console.log('gotoPrevSlide currentIndex =' + +currentIndex);

			if (slideIn.length !== 0) {
				tl
					// move the new slide (the one about to enter viewport) out of the viewport (to the top)
					.set(slideIn, { autoAlpha: 1, className: '+=active' })
					// remove class active from the currently active slide (slideOut)
					.set(slideOut, { className: '-=active' })
					// animate active slide down (out of the viewport)
					.to(slideOut, time * 4, { y: '100%', ease: Power3.easeInOut, onStart: onSlideStartedReverse, onStartScope: this }, 0)
					// animate new slide down (from out of the viewport)
					// .to(slideIn, 0.5, {y: '+=100%', ease:Power3.easeInOut}, '-=0.5')
			}
			// Fade in arrow up
			TweenLite.set($slideNavNext, { autoAlpha: 1 });

			// Fade out arrow down on first slide
			if (index === 1) {
				TweenLite.to($slideNavPrev, 0.3, { autoAlpha: 0.2, ease: Linear.easeNone });
			}
		}

		// Navigation click - go to the Previous Slide
		$slideNavPrev.click(function(e) {
			e.preventDefault();

			var slideOut = $('.slide.active'),
					slideIn = $('.slide.active').prev('.slide');

			goToPrevSlide(slideOut, slideIn);

		});

		/*
		 *   If there's a next slide, slide to it
		 * */
		function goToNextSlide(slideOut, slideIn) {
			var tl = new TimelineMax(),
					index = slideIn.index(),
					size = $('.slide').length;

			currentIndex = index;

			console.log('gotoNextSlide index =' + +currentIndex);

			if (slideIn.length !== 0) {
				tl
					.set(slideIn, { y: '100%', autoAlpha: 1, className: '+=active' })
					.set(slideOut, { className: '-=active', position: 'fixed' })
					// .to(slideOut, 0.5, {y: '-100%', ease:Power3.easeInOut}, 0)
					.to(slideIn, time * 3, { y: '-=100%', ease: Power3.easeInOut, onStart: onSlideStarted, onStartScope: this, onComplete: onSlideChangeEnd, onCompleteScope: this }, 0)

				// Fade in arrow down
				TweenLite.set($slideNavPrev, { autoAlpha: 1 });

				// Fade out arrow up on last slide
				if (index === size) {
					
					TweenLite.to($slideNavNext, 0.3, { autoAlpha: 0.2, ease: Linear.easeNone});
				}

			}		
		}

		// Navigation click - go to the Next Slide
		$slideNavNext.click(function(e) {
			e.preventDefault();

			var slideOut = $('.slide.active'),
					slideIn = $('.slide.active').next('.slide');
			
			goToNextSlide(slideOut, slideIn);
		});
		
		
		// ======
		
     function onNavButtonClick(e) {
			 e.preventDefault();
       //The clicked button
       var $button = $(this),
					 nextID = $button.data('index-number'),
					 $slide = $($button.attr("href")),
					 index = $slide.index(),
					 slideOut = $('.slide.active'),
					 currentID = slideOut.data('slide'),
					 slideIn = $("[data-slide='" + nextID + "']");
			 
			 currentIndex = index;
			 
			 console.log('onNavButtonClick index =' + +currentIndex);
			 
				if(+nextID > +currentID) {
					 goToNextSlide(slideOut, slideIn);
				} else {
					 goToPrevSlide(slideOut, slideIn);
				}

     }
		
		// ========
		
		function onSlideStarted() {
			// Play the timeline for the current slide
			slideInTLs[currentIndex].restart();
		}

		function onSlideStartedReverse() {
			// Play the timeline for the current slide
			slideOutTLs[currentIndex].restart();
		}

See the Pen 595373b68aecd95d5575d76e36015d49 by clzd (@clzd) on CodePen