Jump to content


  • Posts

  • Joined

  • Last visited

About Mattrudd

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Mattrudd's Achievements

  1. Hey @Rodrigo - thanks for your reply man. Yes - I see the reparenting going on - I chose this example because it behaves the way I want my Lottie gallery to behave... unless I'm incorrect I figured I couldn't somehow use a Lottie json link as a data source in the same way this example uses the img tag? If this was possible it would be a pretty straightforward swap I guess - but that's likely a sign I need to go back over JS arrays and try and incorporate. You're right of course about Lottie files being SVGs... the pixellation was a case of Safari striking again! It must've rasterised the image and thrown me... seems fine in Chrome. Because of this Safari paint I figured that Flip was scaling just the container without respecting the SVG... I should have much more faith in GSAP ha! The pen below is very rough and ready - I'm still pretty noob and only part way through (haven't yet centred/overlaid the new container over the thumbnails with Flip.fit etc.) This pen should give you an idea of what I've got in mind though. https://codepen.io/matt-rudd/pen/dyemRzv All that said I'll pause and get my head around @Cassie's how-to - got a feeling at a glance that it's a much better way... I'll be sure to check that after some sleep 😬 Thanks for pointing me towards it 🤝
  2. Realised I neglected to say thanks sooner @Rodrigo!
  3. Hi, My latest aim is to build a Flip gallery (very similar to the walkthrough example https://codepen.io/GreenSock/pen/JjXqMZK) Key complication is I need it to showcase a bunch of animated Lottie files. Figured it best to start at the beginning with Flip and test how I might trigger the Lottie to play once it's nestled into the new container (FLIPpin' clever btw 👏) That led me to my question... still got my training wheels on so bear with me here... Is it possible to ask Flip to scale the SVG vector (think I'm correct in stating this would be scaling the SVG attributes rather than transforms?) in such a way as to avoid the pixellation you can see in my (very rough) demo I could likely just make the original Lottie file a higher resolution, but figured there may be a cleverer way - if nothing else to keep file sizes down. Thanks as ever.
  4. Hi wearers of the green foot cover... I've hit the extent of my less than considerable GSAP knowledge once again - trying to migrate a pice of code I've stolen from TweenMax to GSAP 3. The issue is in the staggerTo section - I've read through the migration docs and tried to find similar examples but not been able to work it out. Tried replacing the two 'tl2.staggerTo's with just 'tl2.to' as instructed, but then I get an error with the last two lines of the timeline, which are already 'tl2.to'. Thinking it needs reformatting to work as intended but not sure how? Incidentally - what's strange is the sequence works fine on Codepen, despite the deprecated code, but not locally via VS Code (which throws up deprecated errors) //// MIGRATION ISSUE! //// let tl2 = gsap.timeline({paused: true}); tl2.staggerTo("line", 0.4, {drawSVG:true, ease:Power2.easeIn}, 0.25, "lineStart"); tl2.staggerTo("line", 0.4, {drawSVG:"100% 100%", ease:Power2.easeOut}, 0.25, "lineStart+=0.25"); tl2.to("#slide1", 1, {x:-13, y:9, ease:Circ.easeOut}, "lineStart+=0.25"); tl2.to("#slide2", 1, {x:11, y:6.5, ease:Circ.easeOut}, "lineStart+=0.5"); ScrollTrigger.create({ trigger: ".text-container", start:document.documentElement.clientHeight * 1.6, toggleActions:"play none none reverse", animation:tl2, }) Thanks as ever!
  5. @Rodrigo you are the man. Thank you! That start value is exactly the kind of thing I was thinking was possible - just formulating it was beyond my reach. I'll go away and learn about that now. Thanks again!
  6. Hey @Rodrigo! Thanks for your response. Sorry if I wasn't too clear... it's not the panels I want to adjust - really happy with how those work. It's that I want Craig's slice animation (isolated in this pen here) to begin when the last panel displays and not before or after. https://codepen.io/matt-rudd/pen/yLjBaEo This way the user won't 'miss' the tween if it plays while 'beneath' the first two panels. Here's the sequence as I see it: -Page load - panel one 'cut' shows -User begins scrolling - panel two 'through' displays, -User continues scrolling - panel three 'noise' displays and the slice animation is triggered (it's just this triggered animation I can't do!) -User continues to scroll - panel section scrolls up to reveal the white div and black text once the slice animation has completed Everything else (as in, the way the panels switch the three white-on-black words and then scroll up to reveal the fade-in black-on-white text) is great as it is. So the changes you made above aren't needed. The way I see it, the animation should be triggered at a specific point along the panel Scrolltrigger - the point that the last word 'noise' comes into view. It's this triggering/sequencing logic that I've been unable to get right. It's likely just a simple bit of tweaking to incorporate this animation into the first Scrolltrigger... but my sleep-deprived brain can't fathom it 🤭 I've still a lot to learn but getting there. Hope that's a bit clearer?
  7. Hi folks. I'd like an animation to run in the final pinned panel of this header, before the third and final panel scrolls up to reveal the paragraph of text. I've tried adding a second timeline and attaching to a Scrolltrigger, but of course, due to the nature of the panels, the third panel 'appears' rather than scroll into view, so setting start/end trigger points doesn't work. Wondering if there's some GSAP-based logic to trigger this 'slice' animation (thanks @PointC! 😬) when the last panel of the three-panel sequence is in place, and not before? Hope my description makes sense. Next on the list is matching the svg text ('noise') with the responsive font size and centred positioning of the proceeding 'cut' and 'through' text - but that's one for Stack Overflow I feel 🤭
  8. I though as much - thanks @GreenSock - it was a function that wasn't necessary. Thanks for the nudge to break it down and build it back up - that did the trick!
  9. Experiencing a strange repeat instance of a Lottie animation in my project... The top disco ball on black is the expected instance, and the one showing in the next div down (purple) isn't wanted/ I've been sure to retain the ScrollTrigger.refresh in the helper function Fully appreciate that a demo is likely required to showcase the issue, but as I'm not sure which bits of code are conflicting it's a tough one for me to strip down into a simple pen! The way I'm setting up the lottie/scrolltrigger animation works on its own without any repeating, but when I add it in with a bunch of other GSAP animations (as well as ScrollSmoother and barba.js) the second view of it in the next div appears. Long shot with what I'm able to provide here but figured one of you experts might know of a common cause? It's bound to be some of my dodgy code clashing with the Lottie helper function. I've been sure to keep the ScrollTrigger.refresh in there, but not sure what could be causing this? I'd fade it out with an onComplete after the full Lottie has scrubbed through, but that's not a good fit for the page. (PS - just a sample animation... wish I was really adding a giant disco ball... 🕺)
  10. @Cassie oh my. I really AM having one of those days 🤣 Thanks for stepping in again! Now where's that 'delete post' button...
  11. Hi again... I'm looking to add a Lottie ScrollTrigger animation on a page with ScrollSmoother. It's been a breeze to replace Locomotive Scroll so far, literally just snip out the scroller proxy and setup the ScrollSmoother at the beginning. It seems I've skipped a beat here with this Lottie section though... with ScrollSmoother active, the Lottie animation runs and pins but doesn't scroll up to reveal the bottom spacer div. Have checked the Lottie helper function and searched the forum for any Lottie/ScrollSmoother examples and come up blank so far. Have commented out the ScrollSmoother in the pen demo attached and it works as expected. Any pointers to highlight what I've overlooked here would be as ever, very gratefully received! 🙃
  12. I don’t think daddy daycare and coding mix haha. Thanks for bearing with my sketchiness! 🤭
  13. Sorry for being slow here... added an opacity: 0 tween on the exit cursor within the onComplete... exit cursor remains after exit so I'm not quite understanding fully just yet. https://codepen.io/matt-rudd/pen/RwMqjPK One more nudge? 😁
  14. 🤦‍♂️ Thank you!