Tween DUration Overlapping Etnire Timeline

[Heimes57]

What I'd like to do is have the last tween start at the same time as the trigger element fires the animation and the duration overlaps the entire timeline from start to finish. In my code, .to(".opening-element-2 > .oe-bg-img") is the one I'm trying to achieve this with. I can't get it to work without extending the length of the TImeLine and/or starts/stops early. 

 

var controller2 = new ScrollMagic.Controller();
var openingelement2 = new ScrollMagic.Scene({
        triggerElement: ".opening-element-2",
        triggerHook: "onLeave",
        duration: "300%"
    })
    .setPin(".opening-element-2", {pushFollowers: false})
    .addIndicators()
    .addTo(controller2);
    
var oe2a = $(".oe-2-arrow");
var ytm =$(".yellow-triumph-mask") 
 
var oe2Amination = new TimelineMax();
    oe2Amination
    .to(".frame", 100, {autoAlpha: 1, ease: Power4.easeInOut}, -100)
    .to(".oe-2-slash", 100, {height: 88, x: 220, y: -44, ease: Power4.easeInOut}, '-=100')
    .to("p.oe-2-text > span:nth-child(1)", 100, {autoAlpha: 1, ease: Power4.easeInOut}, '-=100')
    .to("p.oe-2-text > span:nth-child(2)", 100, {autoAlpha: 1, ease: Power4.easeInOut}, '-=90')
    .to("p.oe-2-text > span:nth-child(3)", 100, {autoAlpha: 1, ease: Power4.easeInOut}, '-=90')
    .to("p.oe-2-text > span:nth-child(4)", 100, {autoAlpha: 1, ease: Power4.easeInOut}, '-=90')
    .to(oe2a, 100, {autoAlpha: 1, y: 21, ease: Power4.easeInOut}, '-=90')
    .fromTo("img.line-globe", 100, {rotation: -33, scale: 0}, {rotation: 0, scale: 1, ease: Power4.easeInOut}, '-=70')
    .to(ytm, 100, {right: 0, ease: Power4.easeInOut}, '-=70')
    .to("p.yellow-triumph", 1, {autoAlpha: 1, ease: Power4.easeInOut})
    .to(ytm, 200, {left: "100%", ease: Power4.easeInOut})
    .to("#trumph-square", 100, {rotation: -45, scale: 1, ease: Power4.easeInOut}, '-=70')
	.to(oe2a, 50, {bottom: 13, ease:Power2.easeOut})
	.to(oe2a, 25, {bottom: 0, ease:Bounce.easeOut})
	.to(oe2a, 50, {bottom: 8, ease:Power2.easeOut})
	.to(oe2a, 25, {bottom: 0, ease:Bounce.easeOut})
	.to(".opening-element-2 > .oe-bg-img", 2400, {y: 4, x: 4, scale: 1.02, ease: Power4.easeInOut}, '-=2000')


var openingelement2Animation = new ScrollMagic.Scene({
    triggerElement: ".opening-element-2",
    triggerHook: "onLeave",
    offset: "0",
    duration: "150%"
})   
	.setTween(oe2Amination)
    .addIndicators()
    .addTo(controller2);  

 

 

[Carl]

HI, not really sure what you need as I'm not familiar with the ScrollMagic API. We keep our support here very tightly focused on the GreenSock API. Also, its quite difficult to just look at code like this and imagine what its supposed to do. 

 

If you set up a reduced test case with just enough code to illustrate the issue (I'm guessing 2 or 3 DOM elements and tweens) someone around here will have a better chance of helping you. 

 

You can use any online editor like jsFiddle, plunkr, or codepen.

 

here are some instructions: