Jump to content
GreenSock

mdelp

ScrollTrigger - Viewport enter as trigger

Recommended Posts

Hi guys, first of all big thanks for the recent ScrollTrigger plugin, which came at the perfect moment for my new project!

I was just wondering 2 things:

 

Is it possible to set a trigger to a timeline, and then stagger all the elements in the viewport that use the timeline?

For example, I have 4 columns with a usp, can I fire a timeline for each usp and stagger them between?

 

As a second question, is it possible to set the viewport as a trigger, not a specific setion or other element?

Let's say I have a component that is used 3 times on a page, if I set a trigger for the component then all 3 will animate on the page, even though the other 2 are not yet inside the viewport. Is there a way to approach this?

See the Pen MWKwbGd by mathieudelporte (@mathieudelporte) on CodePen

  • Like 1
Link to comment
Share on other sites

Absolutely this is possible.

 

gsap.utils.toArray(".c-usp").forEach(section => {
  gsap.from(section.querySelectorAll("i, h3, p"), {
    scrollTrigger: section,
    autoAlpha: 0,
    y: 25,
    duration: 0.75,
    stagger: 0.25
  });
});

See the Pen yLeNodj?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that what you were looking for? 

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

  • 2 weeks later...

I also wonder if it is possible to set a viewport as a trigger. I want to make an animation when user scrolls to the bottom of the page. Is there any way to specify that?

Link to comment
Share on other sites

Hey @dmnk. I'm not sure what you mean. Are you meaning that you want an animation to happen for the entire duration of the scrolling on a page? If so, you just need to use the default values except add scrub: true.

ScrollTrigger.create({
  animation: myAnim,
  scrub: true
});

That's what we did in this demo:

See the Pen gOaOeGz?editors=0010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Hey @ZachSaucier, thank you for such a fast reply. Sorry for not being clear enough.

 

My idea is to have "back to top" element. Once user comes to the bottom of the page or near the bottom of the page (e.g. body element), the "back to top" element will be shown with effect. Once user gets out of the area "back to top" element will be hidden. The effect might be just changing the opacity.

 

In image attached you can see what I mean. Hopefully it is understandable (not the prettiest though).

 

1471585782_ScreenshotatJun1915-10-03.png.74f39749f1a2aa2501b6a95aae349164.png

Link to comment
Share on other sites

Sure, that's easy with ScrollTrigger. Here's how I'd set it up if you want the whole animation to play at one time:

See the Pen qBbRxgP by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

@ZachSaucier Great, it is working like a charm. I noticed also that I was forgetting paused: true. You really helped me. Thank you!

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