Jump to content
Search Community

ScrollTrigger in combination with Stagger: Animate letters one by one

Cas van Grunsven test
Moderator Tag

Recommended Posts

Hi!

I am trying to create a stagger effect with scrolltrigger. In the codepen you see that all words are wrapped inside a div as well as all separate letters. I have created a ScrollTrigger with a start and an end. In this ScrollTrigger, each letter should gradually get an opacity from 0.1 to 1 (as on https://www.studiogusto.com/)

 

At the moment, all letters are animation together, but they should be animating in sequence. Can someone help me out?

 

See the Pen PoyEmeY by casvangrunsven (@casvangrunsven) on CodePen

Link to comment
Share on other sites

Hi @Cas van Grunsven and welcome to the GreenSock forums!

 

First, thanks for being a Club GreenSock member and supporting GreenSock!

 

It's great to hear that you were able to solve your issue. Just in case I forked your codepen (thanks for creating a minimal and simple demo, we love those around here ?)

See the Pen JjmMLqo by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps. Let us know if you have any other question.

Happy Tweening!

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