[GSAP - My Tweens in my ScrollTrigger Timeline are applying to other elements]

@mvaneijgen ah this makes perfect sense, I did come accross the gsap.utils.selector() before I put this post up but I was doing it outside of my ForEach loop so it wasn't working.

 

Thanks again for posting the solution so I can see where I was going wrong.

[GSAP - My Tweens in my ScrollTrigger Timeline are applying to other elements]

Hi everyone,

 

I need my GSAP timeline to be working correctly over multiple elements with the same class as I will be pulling in multiple articles using a looper with two images on that need to change on scroll.

 

Is there any way to make it so that my ScrollTrigger and Tweens will only effect the children on the main div and not any other elements on the page with the same class, as you can see on my codepen it triggers the animation on the second section prematurely.

 

Not sure if this is a scoping issue or I need to use a selector of some sort to only target the classes in the element that's currently active.

 

Could I potentially add a class while the timeline is active?

See the Pen poqVJLx by luke-stoked (@luke-stoked) on CodePen

[GSAP ScrollTrigger + Split Text on multiple elements]

Thank you @mvaneijgen I can see where I was going wrong now. 

 

Have a nice rest of your week.

[GSAP ScrollTrigger + Split Text on multiple elements]

Hi,

 

I'm trying to add this SplitText feature to my site but I'm having trouble getting individual timelines for each of the p tags in my codepen (this will be changed to a class in future) 

I ideally want the first paragraph to start as it is scroller in to view but currently that triggers the one lower done the page to start at the same time.

 

Some pointers would be greatly appreciated.

 

Thanks,

Luke

See the Pen GRPmPEP by luke-stoked (@luke-stoked) on CodePen

[SplitText - Stagger the animation on between lines]

@Rodrigo think you may have cracked it! thanks a bunch. 

I stumbled upon 

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

 this which I used to modify what I had already got together and also came up with this as another solution. Although may add a lot of unnecessary bloat compared to your solution.

 

See the Pen GRPmPEP by luke-stoked (@luke-stoked) on CodePen

[SplitText - Stagger the animation on between lines]

@mvaneijgen appreciate this, didn't know there was a way to set a maximum duration and then that will split the stagger between the amount of elements, very handy. 

@Toso think is more what I was looking for, starting the animation from the top left and going down towards the bottom right of a text. 

Unfortunately there seems to be a bug where the text towards the end of a line animates before it should, could it be to do with the grid: "auto" calculation from the first line of text and as it gets further through the text it starts to be offset due to different character count on line 2,3,4 etc 

Thanks for your input so far everyone

[SplitText - Stagger the animation on between lines]

Hi @Toso

Yeah ideally I want it to run the second lines animation after maybe .3s so once the scrolltrigger was active, the paragraph of text mid way through the animation would look something like this.

Aliquam sollicitudin arcu a ipsum efficitur, at laoreet ante sodales. Vestibulum feugiat nisl eu done
Praesent vel enim et mauris dignissim elementum about half way
Pellentesque volutpat justo about a third
Just beginning

So it would kind of animate from the top left down to the bottom right. 

 

I've seen people use the translation of an image mask to have a similar effect. 

[SplitText - Stagger the animation on between lines]

I'm wanting to add a text fadeIn & Up animation to each individual letter.

Currently it works fine for short sentences of text but over multiple paragraphs it begins to take too long to get to the end of the animation.

 

Is there a way to stagger the animation so that after lets say .3s the second line will begin running through and then after another .3s the third line will begin.

See the Pen vYvmjjv by luke-stoked (@luke-stoked) on CodePen

[Using the same GSAP Timeline to control multiple elements]

You're a star! Thanks you for your reply

 

After a revision to bring my code more inline with the demo you sent over I got it up and running.

 

 

 

[Using the same GSAP Timeline to control multiple elements]

I want to have this timeline run and animate in the text coming up but I must be missing something obvious as I want each button to be controlled individually and not loop through all the buttons on screen when I hover on one of them.

 

Some pointers or guidance would be greatly appreciated.

See the Pen BavppeB by luke-stoked (@luke-stoked) on CodePen