Jump to content
Search Community

Transform a css animation into a GSAP Timeline

SoldierCorp test
Moderator Tag

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

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 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 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.
×
×
  • Create New...