Jump to content
Search Community

can not reset and repeat the animation everytime navbar links clicks

tabish amiri test
Moderator Tag

Recommended Posts

//this is for animating the pages that are related to navigation bar so the parameters are a for active page and d for deactive page 
 
function btt(a,d){
  let tl = gsap.timeline({defaults:{duration:0.6}});
  tl.fromTo(a,
    {  
       
      transformPerspective: 1000,
          transformStyle: "preserve-3d",
          transformOrigin: "top ",
          rotationX: -90,
    },
    {
       
      transformPerspective: 1000,
        transformStyle: "preserve-3d",
        transformOrigin: "top ",
        rotationX:0,
       
    } )
    .fromTo(d,{
      opacity:1,
      display:"block",
      transformPerspective: 1000,
        transformStyle: "preserve-3d",
        transformOrigin: "bottom ",
        rotationX:0,
    },
    {
      zIndex:-1,
      opacity:0.8,
      display:"none",
      transformPerspective: 1000,
        transformStyle: "preserve-3d",
        transformOrigin: "bottom",
        rotationX:90,
    },0);
}
 
Link to comment
Share on other sites

Hm, I didn't see a GSAP-related question in there. Did I miss it?

 

Here are some tips that will increase your chance of getting a solid answer:

 

  • A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
  • A clear description of the issue -  "the purple div only spins 90deg"
  • A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
  • A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

 

Link to comment
Share on other sites

hi there ! I am very new in gsap animations so I am really happy to be here and I am really enjoying it 

but I have faced a problem in my code and I hope that someone helps me solve it ...

I want to add some animations to my sections so when the navbar links are clicked so their corresponding section should come with an animation and it acts as expected but when I click that links again it shows nothing it seems that the pages have been in their animation final state that I dont want that , I want that they be acting the same animation any time the links are clicked

Link to comment
Share on other sites

  • tabish amiri changed the title to can not reset and repeat the animation everytime navbar links clicks

Hi @tabish amiri and welcome to the GreenSock forums!

 

What you could try on your click event is to use the restart method to restart the animation again. This sounds mos likely that you're using the play() method. That will play the animation and the GSAP instance's playhead will stay at the end. Then if you call the play method again nothing will happen because of the playhead's positions. It's already at the end and the instruction you're giving basically tells GSAP to move the playhead forward but the animation is already completed.

https://greensock.com/docs/v3/GSAP/Timeline/restart()

 

Another option is that you're creating a new set of animations in your click event in which case is better to either reset all the styles applied by GSAP to the elements being animated and create the animation again. But I think it'd be better to have a single timeline for each section, store it in a variable or constant and then restart it with the specific nav button.

 

If you keep having issues let us know and remember to include a minimal demo.

Happy Tweening!

Link to comment
Share on other sites

Hi,

 

If you're creating the animation on every click event, which is expensive, you should reset the styles applied by GSAP to all the elements being animated in that particular timeline. Again I think is better to create a single timeline for every element and restart it on each button click instead of creating the timeline inside the click event handler.

 

Finally please provide a minimal demo because is going to be really hard to find the problem like this. You can fork this starter template in order to illustrate what you are trying to achieve:

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!

Link to comment
Share on other sites

Hi,

 

We're going in circles here. I already provided an explanation about this in my previous post in this thread.

 

Here is an example that uses both approaches:

See the Pen MWBxWZx by GreenSock (@GreenSock) on CodePen

 

If you keep having issues remember to include a minimal demo in order to know exactly what's the problem.

Happy Tweening!

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