Jump to content
Search Community

teweenTo/tweenFromTo help needed

Gustavo_H test
Moderator Tag

Recommended Posts

Hello and Peace!

Can somebody help me with the following code? I'm making the slider with navigation using the GSAP. So,  in normal flow it should just change pictures and texts one by one in a queue, when the user hovers on the arrow switcher, the .timeline should stop and on mouseleave it should resume, in case of click - the animation should jump to previous one, play the previous animation and stay paused before next click or mouseleave (this is an algorithm for the left control arrow, the reversed one will be used for the right one).

The problem is that tweenTo as so as tweenFromTo call the function till the beginning of the .timeline on just one click, not once as I expected...
Maybe it's a problem in my function, I'll appreciate your help and advice

See the Pen LYyyjvd by Guss_H (@Guss_H) on CodePen

Link to comment
Share on other sites

Welcome to the forums, @Gustavo_H

 

I would recommend structuring things quite differently. Don't put everything into one long timeline. Instead, just build a function that handles animating to the next section. Then use a delayedCall() to auto-advance after a certain number of seconds. This gives you a LOT more flexibility and it ensures users can't get stuck halfway inbetween two sections. The logic looks sorta like this: 

let curIndex = 0;
let autoPlay = gsap.delayedCall(7, () => goto(curIndex + 1));
function goto(index) {
  let newIndex = gsap.utils.wrap(0, sliderImgArr.length-1, index);
  if (curIndex !== newIndex) {
    gsap.to(sliderImgArr[curIndex], {autoAlpha: 0}); // fade out old
    gsap.to(sliderImgArr[newIndex], {autoAlpha: 1, duration: 6}); // fade in new
    curIndex = newIndex;
  }
  autoPlay.restart(true); // start the timer over for the autoPlay
}

leftSwitch.addEventListener('mouseover', () => autoPlay.pause());
leftSwitch.addEventListener('mouseout', () => autoPlay.resume());
leftSwitch.addEventListener('click', () => goto(curIndex + 1));

This also makes it easy to add new sections because it's all automatic. You don't have to keep adding new animations to your timeline. 

 

Happy tweening!

  • Like 2
Link to comment
Share on other sites

On 7/19/2021 at 10:18 AM, GreenSock said:

Welcome to the forums, @Gustavo_H

 

I would recommend structuring things quite differently. Don't put everything into one long timeline. Instead, just build a function that handles animating to the next section. Then use a delayedCall() to auto-advance after a certain number of seconds. This gives you a LOT more flexibility and it ensures users can't get stuck halfway inbetween two sections. The logic looks sorta like this: 




let curIndex = 0;
let autoPlay = gsap.delayedCall(7, () => goto(curIndex + 1));
function goto(index) {
  let newIndex = gsap.utils.wrap(0, sliderImgArr.length-1, index);
  if (curIndex !== newIndex) {
    gsap.to(sliderImgArr[curIndex], {autoAlpha: 0}); // fade out old
    gsap.to(sliderImgArr[newIndex], {autoAlpha: 1, duration: 6}); // fade in new
    curIndex = newIndex;
  }
  autoPlay.restart(true); // start the timer over for the autoPlay
}

leftSwitch.addEventListener('mouseover', () => autoPlay.pause());
leftSwitch.addEventListener('mouseout', () => autoPlay.resume());
leftSwitch.addEventListener('click', () => goto(curIndex + 1));

This also makes it easy to add new sections because it's all automatic. You don't have to keep adding new animations to your timeline. 

 

Happy tweening!


Thanks!!!
Sorry for delay - had a long road. I'll try to refactor and if it'll be ok, I'll reply here. Really seems like a solution. Thanks allot!

 

Link to comment
Share on other sites

  • 5 months later...

Hello and Happy Holidays!

 

@GreenSock - Thanks a lot for your help that time, but I had a lack of time to discover all the things deeply and made an animation with vanilla CSS and JS at that time. But, IMHO, it's better later than never, so I decided to go back and study carefully this case & try to resolve it finally, so I will appreciate it if you will give me some more help again.

 

I've discovered your recommendations and made some changes to exclude the links to some slides, that are not necessary - the previous slides. So, I've got the methods you've recommended and refactored the code to operate with one slide only on each iteration. It works nice as an endless slider, but I have a problem with the event listener. As you can see (check the console) - after the listener works, the function works too but nothing goes on in the browser. I've tested the function itself, giving it any existing index from images - it works too, why is it going so with the listener - I really can't understand and will be very grateful for your help if it's possible.

 

Best Regards!

See the Pen vYezjZJ by Guss_H (@Guss_H) on CodePen


 

Link to comment
Share on other sites

3 hours ago, Gustavo_H said:

Hello and Happy Holidays!

 

@GreenSock - Thanks a lot for your help that time, but I had a lack of time to discover all the things deeply and made an animation with vanilla CSS and JS at that time. But, IMHO, it's better later than never, so I decided to go back and study carefully this case & try to resolve it finally, so I will appreciate it if you will give me some more help again.

 

I've discovered your recommendations and made some changes to exclude the links to some slides, that are not necessary - the previous slides. So, I've got the methods you've recommended and refactored the code to operate with one slide only on each iteration. It works nice as an endless slider, but I have a problem with the event listener. As you can see (check the console) - after the listener works, the function works too but nothing goes on in the browser. I've tested the function itself, giving it any existing index from images - it works too, why is it going so with the listener - I really can't understand and will be very grateful for your help if it's possible.

 

Best Regards!
 


The solution was very close))))

 

slideOn(index);

function slideOn(){
    if(active && index<3){
        gsaping(index);
        gsap.delayedCall(4,()=>{
            slideOn(index);
        });
    }else if(active) { //here should be one more condition to stop the else performance))))
        index=0;
        slider.innerHTML=reset;
            slideOn(index);//here the delayedCall is not necessary it only harms giving the 4sec pause between the rounds  
    }
    
}

So, I'll proceed to make it 100% functional and dirigible, and will close the topic as solved. Please welcome with your recommendations to make the code more laconic.

Link to comment
Share on other sites

4 hours ago, Gustavo_H said:

after the listener works, the function works too but nothing goes on in the browser

The solution was simple and not really in the handler.

 

slideOn(index);

function slideOn(){
    if(active && index<3){
        gsaping(index);
        gsap.delayedCall(4,()=>{
            slideOn(index); 
        });
    }else if(active) { //here it is - I had to block <else> when the handler works
        index=0;
        slider.innerHTML=reset;
            slideOn(index);//here - the delayedCall caused unnecessary pause between the rounds
    }
    
}



So, I'll proceed to make it 100% functional and dirigible, and will close the topic as solved. Please welcome with your recommendations to make the code more laconic.

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