Jump to content
Search Community

Why move from anime to GSAP doesn't work as expected?

bdrtsky 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

Hello, guys. 

 

Trying to port beautiful anime.js effect to GSAP and have troubles.

 

The effect itself is here (the first one) - https://tympanus.net/Development/StackMotionHoverEffects/

The code is here - https://github.com/codrops/StackMotionHoverEffects/blob/master/js/main.js#L63

 

I made a Codepen to show my issue - 

See the Pen oVqBEX by bdrtsky (@bdrtsky) on CodePen

 

 

  1.  The anime.js code have this piece 
    translateZ: [
        { 
            value: function(target, index) {
                return index*8 + 8;
            },
            duration: 200 ,
            easing: [0.42,0,1,1]
        },
        { 
            value: function(target, index) {
                return index*20 + 20;
            },
            duration: 700,
            easing: [0.2,1,0.3,1]
        }
    ]

    This is fromTo values. But GSAP doesn't have API to set from and to duration and easing separately, right? What should I do then? And I don'treally can't image how this separate values are applied. Any ideas how this work, on what stage?

  2. Why my animation have initial jerking?

  3. Why my elements doesn't moves up?

 

How to port it properly? 

See the Pen oVqBEX by bdrtsky (@bdrtsky) on CodePen

Link to comment
Share on other sites

I would say you are going about it backwards. The two libraries are not a mirror of each other. As you have seen, they do have similar capabilities but build in a different manner.

 

For example, both of them have the ability to have an easing curve. In the Anime case, you have a easeFrom and a easeTo in your example. While GSAP gives you a custom easing curve. Anime's duration is split into two sections, while GSAP is a single duration for the fromTo tween and probably a few more things.

 

So, in order to be able to port it correctly, you have to do far more than just copy over the values from Anime to GSAP. You have to completely digest what each command is doing and then, yourself, translate that into the appropriate library API commands.

 

Example: The GSAP version of the duration is 0.9 as it is seconds-base. The curve of the easing will be a combination of the points [0.42,0,1,1] and [0.2,1,0.3,1] but they need to be spread in the ratio of 2/7ths as is in the duration from Anime.

 

Your GSAP port has a jerk because you have a .fromTo() tween that has from values that differ from the values the element is currently on at the start of the tweens.

 

As a super simple example:

 

If you look at the very first item of the stack, index 0, it is sitting at z: 0 before the interaction. As soon as the user interacts, the from part of the .fromTo() says it has to have a z value of 8 ( 8 = 0*8 + 8). There's your jump. The same thing happens with the rotation and the mouse out event.

 

Does that help?

  • Like 2
Link to comment
Share on other sites

Yes, this is super helpful, thank you @Dipscom

I will play with original anime.js animation more, to understand each step.

 

From what I can see right now, it is animating from z 0, to z 8 ( 8 = 0*8 + 8) (and this is only the `from` part), and then to z index*20 + 20 and at the end of `to` it resets to 0 again! Am I getting this right, to solve this with GSAP I will need Timeline with at least 3 animations instead of one simple animation (without timeline) with anime.js?

 

1. from 0 to z 0, to z 8 ( 8 = 0*8 + 8)

2. from z 8 ( 8 = 0*8 + 8) to  index*20 + 20

3. from  index*20 + 20 to 0

Link to comment
Share on other sites

I haven't worked or tried Anime.js so I am not sure how it is structured.

 

It does look like it comes in already as a chainable timeline by default. So, I guess, you probably are looking at building a timeline of .to() tweens, instead of .fromTo().

 

10 minutes ago, bdrtsky said:

Am I getting this right, to solve this with GSAP I will need Timeline with at least 3 animations instead of one simple animation (without timeline) with anime.js?

 

I'm afraid you're getting it wrong. You'll need a couple of simple .to() commands.

 

1. to z index * 8 + 8

2. to z index * 20 + 20

 

Then, depending how you want the reverse to happen, you just reverse that timeline or you create another one with a different animation and play that.

  • Like 1
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...