Jump to content
Search Community

Trigger separate Animation on a ScrollTrigger step

Tagliavia test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi everyone.
I have a ScrollTrigger scrub animation of sections, each section have loop animations inside. I would like to know what would be the best way to play the loop only on a range of the ScrollTrigger.

In the codeine basically I want the rotating text to play from the beginning  once the section-2 begins to appear and stop it when the section 3 covers it.

Animation should be restarted on enter back of the same range.

Thanks in advance

See the Pen PojemWE by rtagliavia-the-styleful (@rtagliavia-the-styleful) on CodePen

Link to comment
Share on other sites

  • Tagliavia changed the title to Trigger separate Animation on a ScrollTrigger step

Thank you very much Jack, that cleared a lot of things. I want the animation to restart but i guess i can seek(0) when calling pause().

Have one more question thought...

Can we use ScrollTrigger matchmedia with and animation declared this way?, in the docs it always pull an ScrollTrigger instance instead of a Timeline.

Link to comment
Share on other sites

7 hours ago, Tagliavia said:

Can we use ScrollTrigger matchmedia with and animation declared this way?, in the docs it always pull an ScrollTrigger instance instead of a Timeline.

Sure. These produce identical results: 

let tl = gsap.timeline();
tl.to(...); // add animations...
      
ScrollTrigger.create({
  animation: tl,
  ...
});

...and...

let tl = gsap.timeline({
  scrollTrigger: {
    ...
  }
});
tl.to(...); //add animations...

It's just a different way of assigning things. Both work fine inside of a ScrollTrigger.matchMedia({...})

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