Jump to content
Search Community

Animate multiple items in a horizontal scroll

Pauline Brothier test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hello! 

I'm working on an horizontal scroll section and inside this section I would like to animate the big text : "We" and "Are". 

I would like to have a splitText reveal animation, letter by letter, on scroll. 

The animation works, but only after the page is loaded, not on scroll. I don't know why. 

 

Also I would like to know if it's possible to snap the screen when the colored boxes are in the middle of the screen. 

To make the scroll stop a bit to see the box. 

 

Thanks for your help 🙏

See the Pen KKBLqdN by PaulettePaillette (@PaulettePaillette) on CodePen

Link to comment
Share on other sites

  • Solution

 

Hello Pauline.

 

24 minutes ago, Pauline Brothier said:

The animation works, but only after the page is loaded, not on scroll. I don't know why. 

 

That is because you set it up to be triggered, when each quote's top hits the vertical center of the viewport - since all of them are positioned in a way, that they already are past that point (vertically), the tweens will trigger on load.

 

For triggering tweens on individual parts of a fake-horizontal scrolling tween, you'll want to have a look at containerAnimation

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

containerAnimation Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a 

See the Pen 9be5d371346765a8c9a426e8f65f1cea by GreenSock (@GreenSock) on CodePen

 and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger. 

 

 

 

If you want the tween to snap to a certain point, once a user has stopped scrolling, you'll want to have a look at snap.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

snap

Number | Array | Function | Object | "labels" | "labelsDirectional" - Allows you to snap to certain progress values (between 0 and 1) after the user stops scrolling. So snap: 0.1 would snap in increments of 0.1 (10%, 20%, 30%, etc.). snap: [0, 0.1, 0.5, 0.8, 1] would only let it come to rest on one of those specific progress values. It can be any of the following:

 

[...]

 

I only just hardcoded the values that would work in your demo in an array just to give you an idea with the example below. But you could also calculate the values inside a function - although, of course that would be a bit more advanced and you'd have to figure out the logic for that to work with your scenario.

 

I hope that this will help.

 

See the Pen VwBOWEZ by akapowl (@akapowl) on CodePen

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