Jump to content
GreenSock

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

Show/Hide Array

Go to solution Solved by akapowl,

Recommended Posts

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
});

 

  • Like 3
Link to comment
Share on other sites

  • Solution

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

  • Like 4
Link to comment
Share on other sites

  • 4 weeks later...

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

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/

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×