Jump to content

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


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

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

Mattrudd's Achievements

  1. Total sense, thank you! Feels like the library's really starting to open up to me, and I'm beginning to connect more dots (thanks to the patience and kindness of this forum, especially with a code noob like myself). Grateful! GSAP is very clever! 🙌
  2. OK - thanks @GreenSock - understand why sorting the tweens first would be a help, thanks for the advice! Apologies for my unclear explanation - I'm essentially looking to replicate the title here, where 'ASK' starts in view, static, to be replaced by 'FOR' on scroll, and so on. So to replicate that, I tweaked Cassie's example to replace the words on scroll... so it's the beginning I'm looking to match with this example - in my case the word 'One' being visible on load and then the sequence begins on scroll. Clumsy use of the phrase 'scroll into view' - was thinking in markers! I'll go back a few steps and get the timeline right first! Thanks as ever.
  3. Hey @Cassie Thanks loads for this example, been a great jump-off point for my desired effect too. Quite pleased with myself that I managed to find and use 'SteppedEase' in the docs as I didn't want the fade. What I'm trying to achieve is for the first word to appear on load, pinned and visible in the centre of the page, and then words two and three scroll into view in sequence. Thinking it's a fairly simple case of setting the pins, but my foggy brain not quite able to work out the best approach? https://codepen.io/matt-rudd/pen/BawGvqJ
  4. Roger that, thanks! Trouble I'm having is I'm not yet at the GSAP mastery phase just yet to work out how to apply the effect to a second wrapper, or indeed to find the correct parameter for reversing this second instance
  5. @OSUblake Thanks but I'm running before I can walk again - which is easy to do when being inspired by what others have achieved with GSAP! Will have another go at interpreting the helper doc further down the line.
  6. Hi @ZachSaucier, I've been hunting for ages and found this to be the closest ticker/marquee example to what I'm looking to achieve. Could I ask for a little more explanation of how to reverse the direction of one of the lines of text? Forgive me for one more question - Also looking to remove the click/drag functionality so it's just a straight constant animation... have studied the related helper function cross referenced your last pen in this thread with several other examples of this effect and I'm struggling to work these two things out, as every marquee method seems to be different/increasingly complex! Thanks in advance!
  7. It's ok @PointC, I got this one: @keyframes BMW { 0% {background-color:white;} 100% {background-color:black;} Thanks again for your all your help!
  8. Notice that wasn't a 'no' to the Tesla @PointC - more of a 'not quite yet' 😉 If I promise to keep learning (currently working through @Carl's excellent Creative Coding Club), could I stretch to one more ask, toward one of you kind experts? I'm trying to centre the text wheel SVG to the centre of the blue circle. Got a bit stuck with the markup and CSS once again. The container's set to align/justify items, but I can't fathom why the #wheel, as child element, isn't centred like the blue circle? I'll then figure out rotating this text wheel svg as the circle scales on scroll, not after the scale finishes as above. https://codepen.io/matt-rudd/pen/BawPzKZ
  9. @GreenSock 😄 that all depends on how much traction I get with this Portfolio site I'm building!
  10. @PointC you're the man. The Greensock forum needs a 'buy them a coffee' button, at the very least! Thanks again loads.
  11. @PointC Thank you, will have a read for sure. I see you're scaling the whole SVG container - I'm struggling to work out how best to scale just the blue circle on scroll? So that it fills the whole viewport.
  12. @PointC Thanks for the nudge towards SVG masks! Another topic to learn about there. Massively grateful for your ScrollTrigger version - was literally just trying to interpret my original tweening into your SVG mask example, and you've done it for me! 🙌
  13. Hi there, hope everyone is having a great 2022 so far! Enjoying getting to grips, slowly but surely, with GSAP! I'm trying to make a circle scale up to reveal a text wheel (that I'll make rotate on scroll eventually). The clipping method I'm trying to employ is overflow:hidden. Currently the text wheel just scales up with the circle, which I know is down to incorrect markup and styling. Not sure what combination is best here. Appreciate this is more of a CSS issue but as it's CSS for a Scroll Trigger set up, I thought it worthy of an ask! Wondering whether my issue is that I'm scaling up a circle div object from 1 pixel, which as a result can't work properly as a position relative/absolute > overflow:hidden parent. Perhaps the DrawSVG plugin would be a better option, or is the effect I want possible with the right markup and styling? Thanks as ever!
  14. Hi there, thanks for reading! I'm looking for some help to fix my code. I can get ScrollTrigger to work but I need some help to get it to work in Oxygen Builder. I also want to add Locomotive for a smooth-scroll effect. I spent ages building my portfolio site with Divi Builder on Wordpress. I've used ScrollTrigger to get the effects I'm after. Then I realised Divi does not let you add the necessary container tags/IDs the scroll library (Locomotive) requires 😩 The structure works using Divi, as you can see here: https://matt-rudd.com/240418-2/ (I'm hoping to get a stripped-down version of this working as a Codepen, but having a few issues replicating it properly.) As a newbie to CSS, let alone JS and GSAP, I've struggled to get it this far... mainly by copying and pasting bits of code - from these forums (I'm grateful)! I'd like to learn the full stack eventually but for now I need to get my portfolio finished so I can grow as a freelancer myself. Challenge is - I've got my heart set on adding a smooth-scroll effect. So I've moved over to Oxygen Builder which does allow for Locomotive Scroll. I'm not looking for a complete page design - just some help to get this code working. Thanks for your time - please send me a DM with a quote if you're interested. Matt
  15. I hear you thanks! Got carried away again, getting so close to what I wanted to achieve. Apologies for taking advantage of the free help... think I’ve reached my limit here (probably pretty evident but I’ve been a code magpie, trying to reverse engineer the bits I steal, until the realisation hits again that I’ve spent more time tweaking than I would’ve done learning from scratch. Only reason I haven’t used the ScrollTrigger based helper function is that I didn’t realise it produced the same kind of inertia effect as Loco scroll - will look into that before recruiting a pro! Thanks again.