Jump to content
GreenSock

Ivan Mocs

Problem transition animation using Barba.js & Gsap

Go to solution Solved by GreenSock,

Recommended Posts

hello i have problem with transition animation and also text.

 

1.For page transitions I want it to appear from the bottom and disappear to the top, but when I press the button for a short time, the transition appears from top to bottom...

 

2.And for the fade in text animation I have the same problem, namely if I press the button quickly sometimes the last animation has not been completed, so the animation occurs twice.

 

I want when the button is clicked the transition always appears bottom->up, and the text always from 0 to 1 opacity.

 

This is my code

https://codesandbox.io/s/elegant-sara-5wz41g

  • Like 1
Link to comment
Share on other sites

  • Solution
4 hours ago, Ivan Mocs said:

1.For page transitions I want it to appear from the bottom and disappear to the top, but when I press the button for a short time, the transition appears from top to bottom...

I'm struggling to understand what you mean. When I click, it seems to always come in from the bottom. How do I make it come from the top? 

 

4 hours ago, Ivan Mocs said:

2.And for the fade in text animation I have the same problem, namely if I press the button quickly sometimes the last animation has not been completed, so the animation occurs twice.

 

I want when the button is clicked the transition always appears bottom->up, and the text always from 0 to 1 opacity.

Then you should probably add conditional logic to handle that. Like maybe set pointer-events: none on the button as soon as it's clicked or add JS to sense if a transition is in progress and if so, it just ignores the click. 

 

Also, beware of using a .from() animation if/when you allow fast-clicks that could call it again before the previous one finishes. Remember that .from() tweens use the CURRENT value as the destination. So imagine you do .from(...{x: 100, ease: "none"}) on an element that has x: 0. It will grab 0 as the destination, immediately set x to 100 and start animating back to 0...but let's say you run an identical .from() when it's halfway done. The CURRENT value at that point will be 50, thus your animation will go from 100 and finish at 50! It'll appear to be "broken" because it didn't go all the way to 0 but it is doing exactly what it's supposed to. It's just a logic issue in your code. 

 

Of course you could always use a .fromTo() so that you control both ends of the tween. 

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.
×