Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

1 Newbie

About mattdown

  • Rank

Recent Profile Visitors

936 profile views
  1. Wow. Thanks. That's exactly what it needed.
  2. 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
  3. That's exactly what I was after. Thanks so much.
  4. 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
  5. Thanks OSUblake, that fixed the issue of it running twice
  6. 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
  7. Ahhh, looks like it's only working in Firefox 😕
  8. 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
  9. 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 illus
  10. @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
  11. 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.
  12. 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 ad
  13. Ahhh, I see. Yes, that all makes sense now. That will certainly help. Thanks Much appreciated
  14. 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.
  15. 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 mu