So this is my scene in question
//-- body of work - project reveal
const bodyOfWorkProjectReveal = new TimelineMax({ paused: true });
bodyOfWorkProjectReveal
.to(bodyOfWorkSectionTitle, 0.3, { autoAlpha: 0, y: -20, ease: Circ.easeInOut })
.to(bodyOfWorkSectionButton, 0.3, { autoAlpha: 0, y: 10, ease: Circ.easeInOut }, '-=0.3')
.set(bodyOfWorkSection, { className: '+=animating' })
.to(bodyOfWorkBodyArmTwo, 0.4, { rotation: 80, x: 3, y: 6, ease: Back.easeInOut })
.to(bodyOfWorkBodyArmTwoBlur, 0.5, { rotation: 80, x: 3, y: 6, autoAlpha: 0, ease: Back.easeInOut },'-=0.4')
.to(bodyOfWorkBodyHead, 0.5, { rotation: '+=5', ease: Back.easeInOut },'-=0.4')
.to(bodyOfWorkBody, 1, { right: '0%', xPercent: '-85%', ease: Back.easeInOut },'-=0.4')
.to(bodyOfWorkBody, 1, { right: '100%', xPercent: '-100%', delay: 0.5, ease: Back.easeIn })
.fromTo(bodyOfWorkSectionCarousel, 1, { left: '0', x: '100%' },
{ left: '0', x: '0%', ease: Back.easeIn },'-=1.01')
.set(bodyOfWorkSection, { className: '-=animating' })
const bodyOfWorkProjectScene = new ScrollMagic.Scene({
triggerElement: '.section--body-of-work',
triggerHook: 0,
offset: -20
})
.on('enter', function() {
bodyOfWorkProjectReveal.pause(0);
})
.on('leave', function() {
bodyOfWorkSectionCarousel.classList.remove('caption-active');
})
.addIndicators({ name: "Projects" })
.setTween(bodyOfWorkProjectReveal)
.addTo(container);
bodyOfWorkSectionButton.addEventListener('click', () => {
TweenMax.to(window, 0.5, {
scrollTo: bodyOfWorkSection,
onComplete: revealProjects,
ease: Back.easeInOut
});
});
It is triggered with a click event, and when scrolling out of the scenes view, it reverses the timeline (as reverse is true by default). What i'd like to be able to achieve is to be able to call another timeline or function after that "reversed" animation has completed. Is this possible at all?
Cheers!