Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Reksa Andhika

Different animation result when remake from GSAP 1 to GSAP 3

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

  • Reksa Andhika changed the title to Different animation result when remake from GSAP 1 to GSAP 3

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • Solution

 

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

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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 🥰

 

  • Like 2
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.
×