Share Posted October 27, 2021 I've managed to wrangle my example to almost precisely how I want it... I'm just stuck on a couple (hopefully) minor details. I have a ScrollTrigger pinned section in the middle, and it has a bunch of circles within it that slowly rise to the top at varying speeds. I'm using velocity to increase that speed when the user scrolls (thanks to some stellar examples on the forums). My issues: I want the circles section to seamlessly wrap by creating new circles that are always coming up from the bottom. Right now I'm using repeat: -1 after 60 seconds, but that is a subpar experience as the circles typically run out before that timer AND the redraw is jarring. I know this is not ideal. I'm cheating to create my fade out/fade in effect at the top and bottom, respectively. Those are just gradient divs. I'd like to actually have the circles fade in and out appropriately near the edges. Both of these problems seem solvable with something like Blake's SVG clouds experiment: See the Pen wWXRQN?editors=0010 by osublake (@osublake) on CodePen ...but I am having trouble understanding how to integrate what he did into my code, particularly with regard to ScrollTrigger. On a final note (more of a tangent), would you recommend redoing this in canvas with arcs for the circles instead? I don't particularly like how much computational power this seems to take, but I'm uncertain if the performance benefit of canvas would reasonably offset the increase in complexity. Thanks for reading, and for any assistance, tips, thoughts, or recommendations. See the Pen PoKmQeL by JC5 (@JC5) on CodePen Link to comment Share on other sites More sharing options...
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!Register a new account
Already have an account? Sign in here.Sign In Now