Jump to content
Search Community

Staggered text happening all at once & speed of class scroll moving vertically

growmybusiness test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi!

 

So I'm trying to get the .stagger-text class (which moves each word in a sentence upwards on-load) to happen when each isolated item with the class .stagger-text is visible on the screen, I've tried using a forEach loop to apply the ScrollTrigger but that seems to entirely break it (so I clearly did it wrong!)

 

I'm also trying to delay the speed at which the items scroll, which is clearly simple enough... if I were creating a vertically scrolling site. As you can see they scroll down vertically as opposed to horizontally.

 

I feel like these issues are somewhat linked because the site is 'artificially' horizontally scrolling they are all inline and being triggered at the top of the page, which is technically the whole thing, if that makes sense?

 

Hope someone can help!

 

Thanks in advance,

Ben Elwood

See the Pen zYWvdvj by benjaminelwoods (@benjaminelwoods) on CodePen

Link to comment
Share on other sites

  • Solution

Thanks for the minimal demo, @growmybusiness

 

I assume you wanted something like this?: 

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

 

You need to use the containerAnimation feature and loop through things to create separate ScrollTriggers because things come into the viewport at different places. 

 

I hope that helps. 

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

Thank you! Works a charm.

 

Is there any way you'd be able to show me how I'd make this work vertically for mobile? As in if I have to disabled/enable this functionality for resizing to Tablet/Mobile but keeping the ScrollSmoother and text stagger functionality, or should I make another forum post for this?

 

Thanks again,

Ben

Link to comment
Share on other sites

9 hours ago, Cassie said:

Hey there! 

ScrollTrigger.matchmedia() is likely what you're after here.

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

Why don't you take a look at the docs and give it a shot - if you need help pop back and we'll give you a nudge in the right direction. ☺️

 

Perfect! Thank you so much :)

  • Like 1
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...