[Changing text animation]

@GreenSock Noted, thanks for your help, this is what I was after

[Changing text animation]

Hi @akapowl,

Thanks for replying to me. Your solution worked! thank you.

 

Wondering if you can help me reset the timeline on screen resize? I need to use vw for the font size, so I'm trying to grab the new height of the text when the screen resizes and then pass that through the function, but it doesn't seem to be working. Any ideas?

 

See the Pen NWMBJRb by mattmcgilton (@mattmcgilton) on CodePen

 

I'm not sure how to add a codepen into a comment.. 

 

[Changing text animation]

@ZachSaucier How would I make the text go in the opposite direction instead? So falling down instead of up, but keep the first letter coming in first?

[How would I create this staggered text loop?]

https://www.awesomescreenshot.com/video/11513107?key=74daa66d781d1569397d157ff045d1e3

 

I have attached a video showing what I mean. Basically the text staggers in and then changes to the next title, which also staggers in. And then it just keeps looping.

I can't find any examples of this, not sure if it's even GSAP that can do it?

Just looking for someone to point me in the right direction, cheers. 

 

Edit: Just to clarify, I'm only interested in the text animation, not the other stuff going on behind it like the cube spinning etc.. Also I'm not sure how to embed a video instead of linking it. 

 

Edit2: The codepen is sort of what I'm after, but I want the next text to come down from the top, then fall back down and repeat.

I want the text to fall in starting from the first letter, and then fall out starting from the first letter again. 

 

 

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

[ScrollTrigger.batch() - I want more of a delay before images fade in]

On 5/2/2022 at 5:17 PM, akapowl said:

Hello @terroarr

 

 

top is not a valid property - you might be looking for start?

 

...as it also says in a comment in the demo you posted:

 

// also most normal ScrollTrigger values like start, end, etc.

 

 

 

Thanks for the response.

I added what you suggested but I noticed I'm getting a warning in the console.
 

Quote

Invalid property start set to top 25% Missing plugin? gsap.registerPlugin()

Invalid property interval set to 0.1 Missing plugin? gsap.registerPlugin()

 

Any idea why this might be happening? I'm loading the latest gsap.min.js and also scrolltrigger.

 

 gsap.registerPlugin(ScrollTrigger);
   ScrollTrigger.update();

    ScrollTrigger.batch(".fade-in", {

      onEnter: (batch) =>
        gsap.to(batch, {
          interval: 0.1,
          autoAlpha: 1,
          stagger: 0.1,
          duration: 2,
          start: "top 25%",
        }),

    });

 

 

 

[ScrollTrigger.batch() - I want more of a delay before images fade in]

I'm using the code in the codepen to fade in images as you scroll, but it's happening way too early. As soon as the top of the next row of images appears it starts fading in. 

I tried adding a top/end but it didn't change anything.. Not sure what I'm doing wrong here, any help is appreciated. 

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

[How to I change the position of the text in my scroll timeline?]

I like the way my codepen is working, but I just want the text to be positioned in the bottom left of the window instead of the middle like it is now. I want to keep the way it currently functions though, with the text changing on scroll, and changing at the same positions.

 

I tried changing (start: "center 50%") to (start: "center 100%"), but it broke the scroll and the text wouldn't fit inside the scrolling window anymore... Any idea how I can achieve what I'm after? Is it even possible?

See the Pen NWwppWp by matt7861 (@matt7861) on CodePen

[Is it possible to have locomotive.js infinite loop when scrolling down?]

I'm wondering if it's possible to make locomotive.js infinite loop to the start of the content when you reach the bottom of the page content?

Has anyone tried this or something similar with locomotive.js before?