lukestoked

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

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?

Thank you @mvaneijgen I can see where I was going wrong now. Have a nice rest of your week.

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

@Rodrigo think you may have cracked it! thanks a bunch. I stumbled upon https://codepen.io/GreenSock/pen/gyWrPO?editors=0010 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. https://codepen.io/luke-stoked/pen/GRPmPEP

@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

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.

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.

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. https://codepen.io/luke-stoked/pen/BavppeB

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.