Jump to content
GreenSock

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

Transform a css animation into a GSAP Timeline

Recommended Posts

Hi!

 

I am trying to transform or build this css animation into a GSAP timeline because with CSS is consuming too much CPU.

 

The #bar-- is a g element of an svg that contains 80 bars

 

@for $i from 80 through 1 {
    #wave-g__top--#{80 - $i} {
      animation-name: barOpacity;
      animation-iteration-count: infinite;
      animation-duration: 5s;
      animation-delay: $i * 0.065 + 0.25s;
    }
}
  
@keyframes barOpacity {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.2;
  }
}

This is animation I am getting with CSS https://i.gyazo.com/fec064c25c2456ce2c3e34e932a5607e.mp4

 

and I thought this could be the similar in GSAP but is just not working, I am very new with this actually.

 

const bars = document.querySelectorAll('#wave-g__top g')

let tl = new TimelineMax({ repeat: -1 })

bars.forEach((b, index) => {
  const delay = index * 0.065 + 0.25
  tl.to(b, 0.1, { opacity: 0.2 }, `-=${delay}`)
})

 

See the Pen dybRXjq by SoldierCorp (@SoldierCorp) on CodePen

Link to post
Share on other sites

Why not just use a stagger?

 

tl.staggerTo(bars, 0.1, { opacity: 0.2 }, 0.06);

:)

 

  • Like 2
Link to post
Share on other sites

Hi @PointC thank you for your reply.

 

I was testing that too but when the stagger ends the animation is not re-starting fluently like the video because in the video you could see that the bars are returning to the initial value once passed the animation then when it starts again, it will be fluent.

 

I added a codepen, thank you!

Link to post
Share on other sites

I see. I think I'd probably just use a from() tween in this case since each group has a different opacity. You then have them all start at opacity:1 but animate down to their original opacity over the 5 second duration. Maybe something like this:

See the Pen yLBXaOo by PointC (@PointC) on CodePen

 

Does that help? Happy tweening.

:)

 

 

  • Like 3
Link to post
Share on other sites

PS If you want them to go from 1 --> 0.2 like your CSS demo, just switch the tween to a .fromTo()

 

TweenMax.fromTo(b, 5, {opacity:1}, { opacity: 0.2, immediateRender: false, delay:delay, repeat:-1 });

Happy tweenig.

:)

 

  • Like 2
Link to post
Share on other sites

It's perfect, thank you very much!

 

Actually I was about to comment that I was testing that fromTo but you got it first :)

 

 

  • Like 1
Link to post
Share on other sites

I should also point out that this will work with a stagger as well. Doing it that way also has the advantage of using a negative stagger value which negates the need to make an array from the node list and reversing it. 

See the Pen JjPJbBR by PointC (@PointC) on CodePen

 

As with all things GSAP, there are many paths to the same destination. Happy tweening.

:)

 

  • Like 2
Link to post
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.

×