michaelsboost Posted October 18, 2021 Share Posted October 18, 2021 Is it possible to show/hide an array in GSAP like you can with SVGAnimFrames? See the Pen oNNpeNP by michaelsboost (@michaelsboost) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted October 18, 2021 Share Posted October 18, 2021 You'd need to separate all those letters into different paths. Then you can just do a stagger on the opacity or display. You should set the initial state in your CSS. So for opacity, you'd set it to 0 in your CSS. gsap.to("#mySvg path", { opacity: 1, stagger: 0.1 }); 3 Link to comment Share on other sites More sharing options...
Solution akapowl Posted October 18, 2021 Solution Share Posted October 18, 2021 I fiddled around with it a bit and found it worked best to tween on / set the groups instead of the paths - just had to make sure every group inside the #bounce had a background rect - as i found it worked this way, I didn't look further if there was a better solution - but it works and looks quite easy. See the Pen a3134b964c569b9fffead620eb78cec7 by akapowl (@akapowl) on CodePen 4 Link to comment Share on other sites More sharing options...
michaelsboost Posted November 15, 2021 Author Share Posted November 15, 2021 Fiddle: https://jsfiddle.net/gucmsja2/2/ I attempted this again using more frames and now I have a different problem that you can see pretty clearly in my fiddle. It starts with only 1 frame visible but then instead of hiding the others as it iterates displaying the index to block. All the others stay at display block until it plays. How can this be fixed? I know I can use onUpdate() and ticks to get the index but having difficulty setting the delay from that. (example: https://jsfiddle.net/jp2kasry/1/) Here's an example of what it's supposed to look like: https://jsfiddle.net/gucmsja2/3/ Link to comment Share on other sites More sharing options...
OSUblake Posted November 15, 2021 Share Posted November 15, 2021 I'd just use onRepeat in a dummy tween to change the styles of the current and next frame. let groups = gsap.utils.toArray("svg > g > g"); let wrap = gsap.utils.wrap(0, groups.length - 1); let frame = 0; gsap.to({}, { duration: 0.1, repeat: -1, onRepeat() { let last = groups[wrap(frame)]; let next = groups[wrap(++frame)]; last.style.display = "none"; next.style.display = "block"; } }) https://jsfiddle.net/4732raqg/ 1 1 Link to comment Share on other sites More sharing options...
michaelsboost Posted November 15, 2021 Author Share Posted November 15, 2021 Wow!! 😲 that's a neat way to accomplish this. I didn't know about gsap.utils, toArray(), or wrap(). Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now