terroarr

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

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? https://codepen.io/mattmcgilton/pen/NWMBJRb I'm not sure how to add a codepen into a comment..

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

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.

Thanks for the response. I added what you suggested but I noticed I'm getting a warning in the console. 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%", }), });

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.

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?

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?