clzd

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

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

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? https://codepen.io/clzd/pen/VwLzVBB?editors=1010

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(); }