Jump to content
GreenSock

Akash Ranjan

Animate same element multiiple times with scrollTrigger

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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")

  • Like 2
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.
×