Jump to content
Search Community

Continuous animation performance

jp_uk81 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 Guys, 

I'm working on an animation that has the same structure as this pen.

The effect I'm trying to achieve is Items flowing across the bottom right part of the screen at different speed.

I've got 2 questions: 

 

1) I can't understand why at the start of the animation the cats are sitting on the bottom of the container having given them a "top" of 100vh and they don't start from below that container.

2) I'm sure this is not a very performant way to animate this. Is there a better way to do it? Basically I don't care the order of the animations as long as they travel at 45degrees from bottom to the top right of the screen. Animations can occur randomly and they should be continuous.

 

Hope that's clear,

Thank you,

Jp

 

See the Pen JmgBKg by Jp_uk (@Jp_uk) on CodePen

Link to comment
Share on other sites

Hey Jp!

 

You set the bottom to be 100vh, not the top.

 

#pub-anim img{
  position: absolute;
  bottom:100vh;
}

 

As far as performance goes, DOM element-wise, that's pretty much it. The only way to get more performance is to move those elements inside a <canvas> and run a ton of those calculations on the GPU. But, if you only going to have a dozen or so cats, you should be ok.

  • Like 6
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...