mattdown

Wow. Thanks. That's exactly what it needed.

Could I ask for another opinion on something please OSUblake? The splittext animation timeline needs to be used as part of another main timeline where a block fades in and out, then the text animation happens, then another block fades in and out before it all repeats itself. All is fine if the user starts with a wide browser but if they then resize down to a narrow browser, the main timeline isn't taking into account the extra time the text timeline needs to finish animating before the 2nd block appears. Can anything be done to fix this? https://codepen.io/mattdown2478910/pen/BaWQZaQ

That's exactly what I was after. Thanks so much.

I've got this codepen that where text is split into lines and then each line is faded in. The dotted yellow lines highlight the '.line' class that splittext applies when it splits the words etc. When you view this in a large browser window and click 'run animation' it behaves as intended and you can see that the yellow dotted outlines don't contain more than 1 line of text. But, if you then resize the browser and make the window more narrow (<768px for example), the words start to wrap within the yellow dotted lines and the effect of fading in one line at a time is lost. I think I need to revert() on resize somehow to recalculate how new lines are applied but I don't know how I could apply that to my existing code. Any help would be really appreaciated. Thanks Matt

Thanks OSUblake, that fixed the issue of it running twice

Now working in Chrome as well. Seems like I needed a prefix to mask-image. I just need to work out why it's running twice now it seems ? https://codepen.io/mattdown2478910/pen/qBrNbJM

Ahhh, looks like it's only working in Firefox ?

Thanks for the suggestion of using a mask instead. I've been experimenting and have come up with this so far which is much nearer the effect I'm trying to achieve. The timelime seems to be running twice though and misses out the second paragraph on the first iteration. Can anyone point out the error in my loop / code here please? https://codepen.io/mattdown2478910/pen/mdWEebm

Hi all, I've got this codepen which I'm trying to tweak a little to achieve the effect I'm after. As it currently stands, each letter in each line fades in and then the next line starts once the previous line has finished. I need to change this slightly so that the 2nd, 3rd, 4th lines etc. don't have to wait for the previous line to finish first but also have a slight stagger / delay of about 1 or 2 seconds so that the final effect will be a diagonal sweep of the block as a whole instead of the slightly robotic / typewriter effect as it currently is. This attached image kinda illustrates the effect I'm trying to achieve. I'm struggling to work out what changes would be need to the loop and the tween in order to create this? Any help or suggestions would be really appreciated. Thanks in advance Matt

@mikel Based on your example and suggestion, I think I'm getting somewhere now with this. It seems to judder a bit on first part of scroll though and seems to rewind the timelime and play it again when it doesn't need to if the user is scrolling back up and the header is already in view. Updated pen: https://codepen.io/mattdown2478910/pen/NWRoZvp

Thanks for the suggestions so far Mikel. That has given me a few ideas so far. The only thing that differs in your example is that the header doesn't move off in direct relation to scroll amount though which is the key thing that I need to achieve. It's as if I need the timeline to be attached to scroll position if the user is near the top 150px of the page but then just play forward or back if they're lower on the page as per the example link.

Hi all, I wondered if anyone could help with a problem I'm trying to solve. In this pen, there is a fixed position grey header at the top of the page that gets pushed off in direct relation to scroll as the user first lands on the page by using a timeline & scrolltrigger. If the user then gets past the point where the header has moved off and they start scrolling back up the page, the header needs to drop down again into view somehow. This doesn't have to be in direct relation to scroll amount. It just needs to be visible. I'm not sure whether I should be controlling this by adding extra classes to the header and then targetting that forcing in CSS or whether I can somehow reverse the timeline? So in summary, if the user is scrolling back up the page, the header needs to be visible but for the first 150px of scroll downwards, it needs to move up in relation to scroll as if the header is in the flow of the markup. This is a good example of what I'm trying to achieve: https://loupemag.com/

Ahhh, I see. Yes, that all makes sense now. That will certainly help. Thanks Much appreciated

I've got a slideout menu that animates the items in as the menu opens using 2 different timelines: // Open menu timeline open_menu_tl = gsap.timeline({ paused:true }); open_menu_tl.set($main_menu_liner,{autoAlpha:1}) open_menu_tl.from($main_menu,{x:"100%",duration:0.5,ease:'power2.Out'}) open_menu_tl.fromTo('.main-nav li.menu-item a',{autoAlpha:0, x:60},{autoAlpha:1, x:0, duration:0.4, stagger:0.1},"<0.2") open_menu_tl.fromTo('.bottom-nav',{autoAlpha:0},{autoAlpha:1,duration: 0.5},"<0.7") // Close menu timeline close_menu_tl = gsap.timeline({ paused:true }); close_menu_tl.to($main_menu,{x:"100%",duration:0.5,ease:'power2.In'}) close_menu_tl.to($main_menu_liner,{autoAlpha:0,duration:0.35},"<") All works fine on hard page but the contents of the menu area gets reloaded via Ajax during the page transition process. Once the menu has been reloaded, the items don't animate in anymore due to the DOM elements being refreshed I expect. Is there anything I can change in these timelines to target the new DOM elements in a more specific way? I've also tried wrapping these timelines in a function that gets refired on Ajax page load but it didn't make any difference either. Any help / suggestions would be appreciated.

I've been having a go at this today but it's still nowhere near good enough. The inital load of this updated Codepen shows the elements positioned where they need to be (centred in the section on both axis). When the toggle button is clicked, the text and image container gets positioned off of the bottom with only the now enlarged logo (green area) poking up from the bottom. It then needs to animate back to the exact original position. You can see that I've been trying all manor of things such as recording initial position tops etc. but I'm feeling that's the wrong way to go and there must be an easier way of working out where it needs to move back to. https://codepen.io/mattdown2478910/pen/yLaJRGv