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

Share this post


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

Share this post


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!

Share this post


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

Share this post


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

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×