how to reset animation from the start

[abdel wehab cheiguer]

it's my first time posting here, basically i want the animation to restart, but after i added gsap.to the animation fades and the text dissaper

 

plus the first animation starts after 5 seconds, and i want it to start immediately

See the Pen PobPpmO by cheiguer1 (@cheiguer1) on CodePen.

[ZachSaucier]

Hey abdel and welcome to the GreenSock forums.

 

You're making one of the most common GSAP mistakes - creating .from() logical issues. The easiest selection would be to use .fromTo()s instead.

 

Also I think you'd benefit from making use of GSAP's timelines and defaults functionality. I highly recommend going through my article about animating efficiently. 

[GreenSock]

Yeah, there are quite a few logic issues in there. Also:

• ease: "power2.easeOut" isn't valid. It should be either "power2.out" or just "power2" because ".out" is the default type.
• x: "40%" should be xPercent: 40. Technically the former works in most cases, but I'd strongly recommend using the percentage-specific property.
• You don't need to create a bunch of variables with document.querySelector() initially - you can just pass that selector text into GSAP as the target. 
• Like Zach said, instead of a bunch of tweens with delays, you can just use a timeline and the position parameter to schedule things. Much cleaner, especially if you need to make edits to timing.
• Be careful about using CSS transitions - never use them on the same elements/properties that you're animating with GSAP. 
• The reason it's waiting 5 seconds initially is because you've got all your animation inside a setInterval() call with a 5 second delay between calls. Like Zach said, a timeline would probably make things much simpler for you. No need for a setInterval(). Just a timeline with repeat: -1 to infinitely repeat.
• You could use a function-based value for xPercent and feed in all your text and have it make every-other one come in from the left or right, and use a stagger. Here's a comparison of the old way and the new way I'd recommend: 

  // OLD
  gsap.from(text1,{ 
    duration:0.75, 
    x:'-40%',
    opacity:0, 
    ease: 'power2.easeOut'
  });
  gsap.from(text2, { 
    duration:0.75, 
    x:'40%',
    opacity:0, 
    ease: 'power2.easeOut', 
    delay:0.25 
  });
  
  // NEW
  gsap.from([text1, textt2], {
    opacity: 0,
    xPercent: i => i % 2 ? 40 : -40,
    duration: 0.75,
    stagger: 0.25,
    ease: "power2"
  });

  That way, you could feed in as many text elements as you want and it'll handle it all with that one animation. 

Happy tweening!

[abdel wehab cheiguer]

thanks it did kindda work, but the timing is kindda off

 

See the Pen LYbpeKW by cheiguer1 (@cheiguer1) on CodePen.

[GreenSock]

Hm, it looks like you didn't make any of the changes I suggested. All you did is put things into a timeline (which you did incorrectly - you left the delays in there and didn't use a position parameter, so by default animations are sequenced thus your delays are getting ADDED to the sequencing). 

 

Zach and I took a lot of time looking at your demo and crafting responses and offering suggestions. If you'd like more help, please at least attempt the changes we suggested first. If you're confused about how, that's okay - just ask specific questions and we'd love to help. 

[GreenSock]

By the way, here's a fork of your demo that's more like how I'd approach it (at least to a degree - I don't have time to rework everything including CSS): 

See the Pen 5a4e0825e08fb0fda2af02094d4cf9c2?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

This allows much more flexibility - you can just add the class "text" to any slide and it gets included in the staggered animations. It lets you play with the timings in one simple place that'll affect all slides. It gets rid of the CSS animations. You could easily hook this up to a scrubber and have total control of the timing. Like hovering could pause() the current slide or whatever. In my opinion, it's just a lot easier to work with when you don't hard-code every tween independently. But it's totally up to you - there are many acceptable ways to build something like this. 

 

Good luck!

[abdel wehab cheiguer]

Thank you guys it means a lot, and greensock i really didn't see your first comment, maybe because i was tired lol. 

I haven't tried your solution yet because my loptop isn't on me right now, i'll update when i get home.

thank you in advance

[abdel wehab cheiguer]

it works man thank you soooo much

[GreenSock]

No problem. Happy tweening!

[abdel wehab cheiguer]

i'm sorry but there is a problem, there is a section between images some white space, it didn't bother me at first when i click on one of  the radio buttons it takes me to the white space instead of the image

[GreenSock]

If you need help, please provide a minimal demo and ask a GSAP-specific question. These forums aren't intended to be a place where we fix your projects for you, but we'd be glad to answer GSAP-related questions. 

[abdel wehab cheiguer]

The code you gave me works, it's just there is a white section comes when one of the  images slide. 

It wasn't there before. 

 

See the Pen 5a4e0825e08fb0fda2af02094d4cf9c2 by GreenSock (@GreenSock) on CodePen.

[abdel wehab cheiguer]

i managed to do it, i just needed to replace xPercent:-100 to 0 in the last line