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

Hi, I was looking for a bit of advice on the best way to approach a page loading animation. The page consists of a simple 100vh section that contains a centred block and inside that block, there is a logo and some text. The logo will be a set width (only changing slightly over larger viewports). The aim is that on page load, the logo and text container is positioned off the bottom of the grey section but with just the logo (lime green block) poking up and visible from the bottom and then after a few seconds, it will animate back into the center of the section. The logo however, needs to start as wide as the users screen and then shrink back to it's specified size as the parent container animates back to the center of the section. In this codepen, I've built in a temporary toggle which just adds a class to place the container off the bottom of the section and also enlarge the logo. This is obviously not correct as the logo is being pushed off as well. My question is whether using a gsap.set() woulld be the best way to do the initial correct placement off canvas and whether it would be able to accurately calculate the amount of initial vertical movement needed to display the green block (logo). Once that has been set, would it be best to animate using css 'top' positions etc or accurate y positions? Any advice / thoughts on this would be really appreciated.

Ahh, I see. I must admit, I hadn't tried that yet. Yeah, that works much better. Thanks.

Hi all, I've been trying to get my head around Matchmedia and Savestyles should be correctly used. In this Codepen, the boxes are meant to fade in scroll if the viewport is wider than 1023px but then just appear as blocks without any animations for screen sizes smaller than that. If I start by viewing it as large size, the animations work as expected and then if I shrink the browser down they become non-animated for smaller screens, also as expected. If I then stretch the browser to the larger size again, they appear full opacity until the trigger is reached. It's as if the initial state isn't being calculated by Scrolltrigger again? What am I doing wrong here? Any help would be appreciated.

Thank Mikel, that all makes sense now. I must admit, I hadn't read that aspect of the docs yet as I'm a bit new to Scrolltrigger.

I've been trying to work out the best / easiest way to control a timeline animation so that I have full control over how much of the user scroll makes the animation fade in, stay visible for a while and then fade out, all in relation to scroll. In this example, it's broken because I'm attempting to fade in using a 'from' tween and then fade out again using a 'to' tween. As you'll see, the white boxes just disappers instanly instead of fading back out again. I created another pen here which uses just one timeline to achieve the same desired effect by using a realtive position parameter at the end but the problem then is that I can't easily control how quickly the item fades in, stays visible and then fades out as the timelime is running based on that relative parameter at the end to create the visible duration in the middle. If I increase the '2' number at the end, the box just fades in a lot quicker, stays for longer, then fades out quicker again. What's the best way to approach this? Thanks in advance for any tips or advice. The first pen achieves the desired effect but doesn't give me much control over how much of the scroll dtermines the fade in and the 2nd pen is the broken one where I'm attempting to do it with 2 different timelines. Getting the 2nd one to work would be my favoured option as I can then fine tune the trigger points and possible slight adjustments to the 'out' animation. https://codepen.io/mattdown2478910/pen/MWjWXyW

Hi, Just making the changeover to ScrollTrigger from Scrollmagic so I'm a bit late to the party but really impressed with it so far. I've come up with this layout which kinda achieves what I want it to by having a few normal scrolling page sections and then a few sections which reveal as the user reaches them followed by another normal section and footer to finish off the page layout. My example relies on specifying a margin:200vh to the '.last-scrolling-section' section which seems to work OK but I was wondering whether this could be created in a more sustainable way by getting ScrollTrigger to work out what that amount should be, just in case another 'reveal-section' gets added to the layout in the future. The z-index for these are also specified in the CSS whereas it would be good to let Scrolltrigger calculate these somehow. Also, in the Codepen, you can see that I've attempted to pin the orange section for the duration of one viewport height scroll length. This seemed to break the reveal sections, probably due to the bottom margin of the '.last-scrolling-section'. How could I integrate the pinning of the orange section (or any future additional normal scrolling sections) without it breaking the reveal functionality? Thanks in advance for any suggestions or assistance. Matt

Just one more quick question..... Now that I have altered the pen to use your method of for each etc, how can I make the animation start from the last item in the list instead of the first? Thanks Matt Update: Think I worked it out by using .reverse() before the .each()

Thanks for your help PointC, I think this is the approach I'll have to explore. Matt

Hi all, I'm struggling to work out how I add a slight duration increase of each item in a staggerfromto animation. As each of these list items comes into view, I need to increase the duration it takes to settle into the final position so it gives the impression that the top item is slightly lighter in weight and therefore takes a bit longer to drift down. Hope that makes sense and any help would be really appreciated. https://codepen.io/mattdown247/pen/bgzVZN

I'm struggling to work out how to get the border animation to loop perfectly on the following Codepen example: http://codepen.io/mattdown247/pen/mVKxBq It jumps when it reaches the top but I need it to loop smoothly. Any help would be really appreciated.