GSAP and scrollMagic should center the image on scroll

[DD77 8 Likes (Newbie)]

Not sure why the image on section-2 doesn't center on scroll. I tried everything so far. It should appear from section-1, so with the offset, starts animating .

What I'm I missing here?  on leave should go back at the start on the left.

    new ScrollMagic.Scene({triggerElement: "#section-2",offset: -350, duration:  $('#section-2').outerWidth(true)})
        .on("enter", function(){
        $("#anchor2").addClass('selected');
        $("#section-2").addClass('animated fadeInUp'); 

        var tl = new TimelineLite();

        tl.to("#section-2.fadeInUp .animated-items", 1, { x: getMidX("#section-2.fadeInUp .animated-items")+20 } );

        function getMidX( obj ){
          return ( $(obj).parent().width()/2 ) - $(obj).width()/2;
        }

      })
        .on("leave", function(){
        $("#anchor2").removeClass('selected');
        $("#section-2").removeClass('animated fadeInUp');

        tl.to("#section-2.fadeInUp .animated-items", 1, { x: getMidX("#section-2.fadeInUp .animated-items")+20 } );

        function getMidX( obj ){
          return ( $(obj).parent().width()/2 ) - $(obj).width()/2;
        }

      })
      .addTo(controller);
  

 

See the Pen GyRxYj by davide77 (@davide77) on CodePen

[Sahil 2,541 Likes (Superhero)]

I have changed tween on line 75. I am not sure in how many places you are updating transform x of that image, but this should take you in right direction. You have to debug everything and see what are current x, xPercent values, how everything is being affected. I have reversed the direction of scroll, as previous one seems so unnatural. Also you need to use addIndicator plugin for scrollMagic for indicators to show up.

 

See the Pen mpyqON?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[DD77 8 Likes (Newbie)]

@Sahil almost there, as the image on the right should scroll to the left on section one, the image on section2 should move to the center once is animated. 

perhaps the .setTween(".title", {x: "28.5%", scale: 1,  ease: Linear.easeNone}) has to change??? 

[DD77 8 Likes (Newbie)]

See the Pen LeEeGE?editors=1010 by davide77 (@davide77) on CodePen

 

 

have a look at line 48 please, any good?

[Sahil 2,541 Likes (Superhero)]

I think you should leave first image as it was because it jumps when you scroll if you are using fromTo tween, here 'to' tween will be better I guess. Another big issue is, your images have absolute width which just makes it impossible for you to analyze what is going on.

[Dipscom 2,815 Likes (Superhero)]

Looks like I placed my two cents on the duplicate thread. Have a look at my comment there - I have a feeling it will be relevant to what the two of you are discussing.