Animate same element multiiple times with scrollTrigger

[Akash Ranjan]

Hello,

 

I want to animate single element multiple times with scrollTrigger. I am using fromTo method everytime I animate. I want to know if this is the right way to do so or there is a better way to do this.

 

Please see codepen for reference

 

Thanks alot

See the Pen OJEVpVK by akashrwx (@akashrwx) on CodePen

[alig01]

Once you start learning something new there is no right or wrong. Play around with the library and try to acquire new knowledge each time. You will get better and better and improve the mistakes you made in the beginning with practice. 

 

But for that to happen you need to invest time reading articles provided by greensock (and other platforms) and "study" the documentation. Every basic question you could come with is already answered there.

 

Quote

• fromTo() - You define the starting and ending values.
• to() - You define the end values to animate to, GSAP uses the current values as the start values.

So basically to() uses the current values you defined in fromTo(), so you don't have to define them again.

I would also recommend you to have a look at the articles with most common scrollTrigger mistakes.

 

And finally I would advise you to use a timeline if you want to animate the same element sequentially or create a more complex animation.

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".anim-parent",
    start: "top top",
    end: "bottom center",
    scrub: 0.6,
    markers: true
  }
});

tl.fromTo(
  ".box",
  {
    xPercent: 0,
    rotation: 20,
    opacity: 1
  },
  {
    xPercent: -40,
    rotation: 0,
    opacity: 0
  }
);

tl.to(".box", {
  xPercent: 0,
  rotation: 20,
  opacity: 1
});

 

Good luck

[Akash Ranjan]

Thanks for the insight @alig01.

 

Just one confusion though. So suppose if I put everything in a timeline like you mentioned should I add delay if I want that element to stay a little longer once it has appeared because currently I am using different scrolltrigger values to trigger the animation.

 

Thanks

[mvaneijgen]

Yes you can add a delay or you can play with the position parameter of your tweens and sometimes I like to add an empty tween to my timeline where it does nothing for x amount of seconds tl.add(() => {}, "+=1")