Jump to content
GreenSock

purple-lightsaber

ScrollTrigger Slide Up Sentences separated by a bullet point

Recommended Posts

I've got 3 sections of copy separated by two bullet points. I'd like the first section to slide up on page load, then I'd like the second section (in between both bullets) to appear when all 5 of its sentences are in the viewport. Only problem is that its first and last line (lines with bullet points) are sharing lines with the first and last section. Is it possible to slide up only the copy which is within these bullet points, instead of the entire line sliding up which is what is happening now.

 

Just to clarify when the line "aute irure dolor. ⬤ sequi nesciunt. Neque porro quisquam" scrolls into viewport I'd everything in green to slide up but not the part in red.

Lorem ipsum dolor sit amet, consectetur adipiscing - the blue text slides into place on page load

incididunt ut labore et dolore magna aliqua. Ut enim

ad minim veniam, quis nostrud exercitation

magni dolores eos qui. ⬤ Quis autem vel eum iure 

Neque porro quisquam est, qui dolorem ipsum quia dolor

reprehenderit qui in ea voluptate velit esse quam nihil

ullamco laboris nisi ut aliquip ex ea commodo consequat 

aute irure dolor. ⬤ sequi nesciunt. Neque porro quisquam - the green text slides into place when this line scrolls into viewport

et quasi architecto beatae vitae dicta sunt explicabo

accusantium doloremque laudantium, totam rem aperiam

Feedback is appreciated                                                                    - the red text slides into place when this line scrolls into viewport

 

See the Pen XWzvBZX by ac09 (@ac09) on CodePen

Link to comment
Share on other sites

Hi purple-lightsaber,

 

No, that's not possible with your current setup. You're probably going to have to split each color up into it's own section and then offset the first line based on the width of the previous section's last line. And I'm not sure batch is the right approach either. If you want something to be triggered on a certain line then you should use that line as the trigger.

 

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