Different animation result when remake from GSAP 1 to GSAP 3

[Reksa Andhika]

So i found code

See the Pen gWPvJB?editors=1010 by bcarvalho (@bcarvalho) on CodePen

 (credit to Bruno Carvalho) for slider parallax, but it's create with TweenMax (GSAP 1). I want to remake the code with GSAP 3, but the result is different, kinda buggy.

 

Any solution what's wrong?

Thank you

See the Pen WNoNZyO by reksaandhika (@reksaandhika) on CodePen

[ZachSaucier]

Hey Reksa and welcome to the GreenSock forums. Unfortunately we don't have the capacity to debug these sorts of issues for every person who posts in our forums for free. But if you're able to isolate the issue(s) we'd love to provide info on how to fix them. Or perhaps another generous person will come by and invest the time to debug to figure out where this issue is coming from. 

 

The GSAP 3 migration guide might be of interest as well as the GSAP 3 release notes.

[Reksa Andhika]

13 hours ago, ZachSaucier said:

Hey Reksa and welcome to the GreenSock forums. Unfortunately we don't have the capacity to debug these sorts of issues for every person who posts in our forums for free. But if you're able to isolate the issue(s) we'd love to provide info on how to fix them. Or perhaps another generous person will come by and invest the time to debug to figure out where this issue is coming from.

 

The GSAP 3 migration guide might be of interest as well as the GSAP 3 release notes.

Thank you for reply. That's bad news for me

 

I do read migration guide, and i think i do the right thing, but the result is just weird.

[mikel]

Hey @Reksa Andhika,

 

Yes, debugging is a tough job.
Maybe you can customize this version for your needs.

 

See the Pen NWPJeyg?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[Reksa Andhika]

Hi @mikel thank you for reference

[akapowl]

 

Hey @Reksa Andhika

 

I found the cause (luckily didn't take too long).

It's in the variables that are used for the setting of inline-styles.

 

Instead of 'auto', use 'unset' and you should be good to go.

 

        if (newSlide.index() > activeSlide.index()) {
            var newSlideRight = 0;
            var newSlideLeft = 'unset';
            var newSlideImageRight = -slideshow.width() / 8;
            var newSlideImageLeft = 'unset';
            var newSlideImageToRight = 0;
            var newSlideImageToLeft = 'unset';
            var newSlideContentLeft = 'unset';
            var newSlideContentRight = 0;
            var activeSlideImageLeft = -slideshow.width() / 4;
        } else {
            var newSlideRight = '';
            var newSlideLeft = 0;
            var newSlideImageRight = 'unset';
            var newSlideImageLeft = -slideshow.width() / 8;
            var newSlideImageToRight = '';
            var newSlideImageToLeft = 0;
            var newSlideContentLeft = 0;
            var newSlideContentRight = 'unset';
            var activeSlideImageLeft = slideshow.width() / 4;
        }

 

See the Pen 891c528684570be185a62d79f89b7160 by akapowl (@akapowl) on CodePen

 

 

Cheers.

Paul

 

[Reksa Andhika]

Oh my god, you are real life saver @akapowl, im wasting so much time figure it out, thank you so much i'm happy asking on this forum ?