Jump to content

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

Transform a css animation into a GSAP Timeline

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



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 comment
Share on other sites

Why not just use a stagger?


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



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