Jump to content
Search Community

GSAP and scrollMagic should center the image on scroll

DD77 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

@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??? 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...