mdelp Posted June 6, 2020 Share Posted June 6, 2020 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 1 Link to comment Share on other sites More sharing options...
GreenSock Posted June 6, 2020 Share Posted June 6, 2020 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? 5 1 Link to comment Share on other sites More sharing options...
dmnk Posted June 19, 2020 Share Posted June 19, 2020 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 More sharing options...
ZachSaucier Posted June 19, 2020 Share Posted June 19, 2020 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 More sharing options...
dmnk Posted June 19, 2020 Share Posted June 19, 2020 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). Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 19, 2020 Share Posted June 19, 2020 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 1 Link to comment Share on other sites More sharing options...
dmnk Posted June 19, 2020 Share Posted June 19, 2020 @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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now