Jump to content
Search Community

ScrollTrigger - Viewport enter as trigger

mdelp test
Moderator Tag

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

  • 2 weeks later...

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

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